WooCommerce Booster Module Documentation

📝 Note: The WooCommerce Booster module is part of Neve Pro which you can get from here. If you would like to learn more about the Neve Pro Addon, take a look at Neve Pro Addon's full documentation.

The options presented in this guide are related to the following pages:

Advanced options are included in this module:

🖲️ Activating the Module

1

Install the Neve PRO plugin using these instructions.

2

Navigate to Neve >  Neve Options > Neve Pro.

3

Click on the  yellow notice to  install the Sparks plugin. This will enable the WooCommerce Booster.

📝 Note: The Neve Pro license can be used to activate Sparks.

If you want to explore all the options that Sparks consists of, check this documentation.

🗂 Shop Customizations

For the Shop page, there are  seven areas of customization available in Neve Pro. These can be seen in Neve > Customize > WooCommerce > Product Catalog.

General

• Shop page display - you have the possibility to show products / categories / products & categories.
• Category display - show products / subcategories / products & subcategories.
• Default product sorting - you have the possibility to choose between: custom ordering + name / popularity (sales) / sort by most recent / sort by price( asc / desc).
• Products per row - control the number of products displayed per row.
• Rows per page - control the number of rows displayed per page.

Page Layout

• Products per row - it represents the number of products displayed on each row, from 0 up to 6.
• Products per page - it represents the number of products displayed on each page; there is no limit.
• Pagination - can be designed as numeric ( 1, 2, 3 .. ) or infinite scroll ( loading a new batch of products on each scroll ).
• Product filtering - it enables the sorting dropdown above the products and can be disabled if needed. 
• Layout toggle - will add a toggle on the Shop page, which will display the products either in a grid view or a list view.  

Product Card

• Layout - it can modify the way that the products are displayed: grid / list.

• Add to cart Button - it is the button that allows the customer to buy a product and has three options of display: none / after image / over image.

Card Image

• Force Same Image Height - it makes all your products use the exact same height (no matter their individual sizes). Once that option is enabled, it will generate a new field where you can enter the exact height (in px) that you want to use. 
• Image style - another useful option is to select a hover effect for the product images. You can choose between None, Zoom, Next Image, Swipe Next Image (displays different images from the product's gallery, if there is any), Blur, Fade In, Fade Out, Glow, Colorize, and Grayscale.

Card Content

• Elements Order - enable / disable (by clicking the 👁️ button) and reorder elements in the product box (title, reviews, price).
• Alignment - it represents the alignment of the product's details left / right-aligned, center, or inline.
• Price template - in this field, you can add prefixes ( only, buy at ) or suffixes ( included tax, VAT included) for the price. 
• Advanced reviews - apart from the total review score displayed in the form of stars, display the total review score <number> and how many reviews are recorded for a particular product. It can be enabled or disabled.

📝 Note: The advanced reviews will be visible only after approving the reviews.

Sale tag

This is the area where you can customize the Sale tag which appears on discounted products: 

• Position - inside the product box or outside.
• Alignment - it changes the alignment of the Sale tag and has two options: left/right.
• Border-radius - modifies the shape of the Sale tag.
• Background and text color - change the color of the background and text of the Sale tag.

• Text - which would replace the default Sale! text. You have to disable the sale percentage in order to see the text.

If you want to display a percentage of the sale, you can  Enable sale percentage, and the products will display a 30% sale, for example (based on the actual selling prices). Once the sale percentage is enabled, a new file will appear for the Sale tag format. There is where you can enter a formatted value for the percentage sale like {value}%.

Category Card

This is the area where you can choose the desired  layout for the category card: Simple, Boxed, or Cover. The changes are visible if you have chosen to show categories or products and categories on the catalog.

🗒 Single Product

Neve Pro brings in customization options for the single product page as well.

Elements Order

Similar to the Shop page, the  order of the elements highlighted in the image below can be updated according to your needs. The visibility can also be customized by clicking on the 👁 icon.

The following options can be enabled on the product page, in case you need them:

• Elements Order - modify the order of the product information.
• Price template - in this field, you can add prefixes ( only, buy at ) or suffixes ( included tax, VAT included) for the price. 
• Enable Gallery Thumbnails Slider - display the product gallery images in a carousel.

• Enable Image Zoom Effect - it zooms in on the product-featured image when hovering over it.
• Show Breadcrumbs - display the path from the home page to the current product
• Show Product Tabs - a table with multiple tabs like product descriptions and reviews. Learn more about product tabs from this doc.
• Enable Seamless Add to Cart - add the product to the cart without refreshing the page, notifying the buyer with a popup.

• Show Upsell Products - display the upsells configured in the product settings (⚙️) below the description. Those are the products that you recommend instead of the currently viewed product.

📝 Note: The upsell products will appear on the Product Page only if they have been configured in Products > Pick a product > Linked Products and add them to UpSell products. Configure UpSells for a product; Display UpSells products on the product page

• Show Recently Viewed Products - display recently viewed products in a two columns grid layout on the right side of the page.
• Enable Product Navigation - display arrows for navigating through the products without returning to the shop page.

 Related Products

• Show Related Products - enables the presence of the related products.
• Enable Related Products Slider - display the related products in a carousel.
• Number of Related products - type the desired number of related products.
• Number of Columns - type how many columns you want to be displayed.

Sticky Add to Cart

As suggested by the name, the add to cart button can be visible all the time on the single product page by setting it to be sticky. Available customizations:

• Position of the button - can be either at the bottom of the page header or above the page footer. 
• Color and background color - modify the color of the section where the button is displayed. 
  • 📝Note: You can boost the website's appearance by using the Gradient option that can be accessed from the Background color.
• Enable Tabs in the Sticky Add to Cart - the tabs are product Descriptions, Reviews, and others in case you add more of them to the website - check the image below.

This is a responsive option, meaning that it can be enabled/disabled only on Desktop or Mobile devices or both of them.

 Exclusive Products

This is a section on the product page that allows you to edit:  Title and Category of the products that will be displayed.

🛒 Cart Page

The available options for the cart page are the following:

• Layout - display the Cart totals table on the normal side of the page or side by side.
• Enable Fixed Total Box - make the total box sticky when scrolling the page down.
• Show Cross-Sell Products - display a table with cross-sells configured on the individual products.
• Enable Payment Icons - show payment icons in the Cart's total table. Those just inform the user which payment methods are available (Visa, Mastercard, PayPal, Stripe, Visa Electron, Cash on Delivery, Amazon, American Express, Apple Pay, Bank Transfer, Google Pay, Google Wallet, Maestro, Pay U, Western Union).

📝 Note: The cross-sell products will appear on the Cart Page only if they have been configured in Dashboard > Products > pick a product > Linked Products and add them to Cross-Sell products.
Configure Cross-Sells for a product
Display Cross-Sells products on the cart page

🧾 Checkout

The available  options for the checkout page are:

Checkout Style

There are three layouts available for this page:

• Standard - the form with the billing details on the left side and the cart totals table with the Place Order button in the right sidebar.
• Vertical - the form with the billing details centered and the cart totals table with the Place Order button below.
• Stepped  - the page will be structured as a wizard with three steps, each tab displaying the information centered. It also has some settings (⚙️) available.

You can also add a boxed style for any of the three styles.

 General

• Required/optional fields  - some fields can be optional, required, or hidden. Those are the Company name, Address line 2, and Phone field.
• Highlight required fields with an asterisk - display a red asterisk near the required fields.
• Enable Fixed Order Box - this option is available only for the Standard layout
• Use Labels as Placeholders - it places the fields labels inside them and reduces the table height.
• Show Order Note - display the Additional information form.
• Show Coupon  - display the coupon field.
• Privacy policy page  - set the desired text and page.
• Terms and conditions - set the desired text and page.

🎥 Featured Video for Products

Another awesome  feature of the WooCommerce Booster is the ability to add a featured video for each product. Similar to adding a featured image, you can select a video that will show up on the single product page. In order to do this, you have to follow these steps:

1

Go to Dashboard > Products and choose the desired product.

2

Click on the Edit button and go to the right-hand bar on Product Settings (⚙️).

3

Add the link to the desired video, customize the video however you want, and click on Publish/Update.

💡Result

🚪Off-canvas sidebar for the Shop page

Neve offers multiple customization options for the layout. These options can be found in  Customize > Layout > Content / Sidebar > Shop / Archive. You can opt-in for the sidebar layout to be the same on the entire site or have a more advanced model where different types of pages have different sidebar layouts.

If you decide on the second option, you will find there are 5 options:  default, none, left, right, and off-canvas - the sidebar is hidden by default, and it slides in from the left side of the screen when clicking on the dedicated sidebar button.

🗂Useful Resources

🎥 Video - how to customize the Shop page using Neve PRO

🎥 Video - how to customize the Cart and Checkout Page in Neve PRO