WooCommerce Booster Module Documentation

WooCommerce Booster is part of Neve Pro Addon's modules. 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.

  1. Shop
  2. Product
  3. Cart
  4. Checkout
  5. Using a featured video for the products
  6. Off-canvas sidebar for the Shop page

Activate the module

To activate the WooCommerce Booster module, navigate to  Appearance > Neve Options > Neve Pro and enable the module.

Make sure you have the WooCommerce plugin installed, for the module to be activated.

Features

The WooCommerce Booster module adds new options for the WooCommerce pages. These options can be seen in  Appearance > Customize > WooCommerce.


1. Shop Page

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

a) Page Layout

Here is where you can customize the number of products per row, alongside the number of products per page

The pagination can be designed as numeric ( 1, 2, 3 .. ) or infinite scroll ( loading a new batch of products on each scroll ).

The product filtering can be disabled if needed and a Layout toggle can be enabled ( this will add a toggle on the Shop page, which will display the products either in a grid view or a list view

There are Typography options for this page, in Dashboard -> Appearance -> Customize -> Typography -> WooCommerce.

b) Product Card

Neve Pro brings in new options for positioning the Add to Cart button, Quick view button ( which opens a popup window with details about the product ) and the possibility to implement a wish list mechanism with any extra plugin.

Just select a position for the Wish List icon ( top or bottom of the product ) and once your users click on it, it will automatically add the selected products to a special list of favorite products. To navigate the list, make sure you add the Wish List component in the Header builder

There are also options for transforming the layout of the products in either a grid or a list view, and to add a box-shadow.

c) Card Image

If you want to be sure all your products use the exact same height ( no matter their individual sizes ) you can select the  Force Same Image Height option which will do just what its name suggests. Once that option is selected, you get a new field where you can enter the exact height ( in px ) that you want to use. 

Another useful option is to select a hover effect for the product images. You can choose between None, Zoom (make the image bigger), Swipe Next Image ( on hover, show the first image from the gallery, if there is an image ), Blur, Fade In, Fade Out, Glow, Colorize, and Grayscale.

d) Card Content

Easily enable/disable and reorder elements in the product box ( title, reviews, price, category and the short description ).

Decide on an alignment option ( left/right-aligned, center or inline ) and enable 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 ).

e) Sale tag

Customize the Sale tag which appears on discounted products by choosing its position ( inside the product box, or just on the edge ), alignment ( left/right ), border-radius, background and text color, and text ( which would replace the default Sale! 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 filed will appear for Sale tag format. There is where you can enter a formatted value for the percentage sale like {value}%.

Typography options for the sale tag are available in  Dashboard -> Appearance -> Customize -> Typography -> WooCommerce.

Want to have multiple different badges? No problem. Follow this doc to learn how to do do that.

f) Category Card

Choose the desired style for the category card.


2. Single Product Page

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. 

Product Gallery (check image) - two layouts available.

The following options can be enabled to the product page, in case you need them.

Enable Gallery Thumbnails Slider (check image) - display the product gallery images in a carousel.

Enable Image Zoom Effect - it zooms in the product featured image when hovering over it.

Show breadcrumbs (check image) - display the path from the home page to the current product

Show Product Tabs (check image) - a table with multiple tabs like product description and reviews.

Enable Seamless Add to Cart - add the product to the cart without refreshing the page.

Show Upsell Products (check image) - display the upsells configured in the product settings below the description.

Show Recently Viewed Products (check image) - display recently viewed products in a two columns grid layout on the right side of the page.

Enable Product Navigation (check image) - display arrows for navigating through the products without returning to the shop page.


A dedicated section can be enabled on the product page, that shows related products. It can behave like a slider and it allows you to change the maximum number of related products as well as the number of items in a row.

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. The position of the button can be either at the bottom of the page header or above the page footer. You can also customize the color and background color of this section where the button is displayed. 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 its title and display products from the desired category in a carousel layout.

Typography

There are Typography options for this page, in  Dashboard -> Appearance -> Customize -> Typography -> WooCommerce.


3. Cart Page

The options for the cart page are available in Dashboard -> Appearance -> Customize -> WooCommerce -> Cart Page (check image), and are as follows:

Layout (check image) - display the Cart totals table on the right side of the page, or at the bottom.

Enable Fixed Total Box (check image) - make the total box sticky when scrolling the page down.

Style (check image) - opt for an alternative background color.

Show Cross-Sell Products (check image) - display a table with Croll-Sells configured on the individual products.

Enable Payment Icons (check image) - show payment icons in the Cart totals table. Those just inform the user which payment methods are available.


4. Checkout Page

The options for the checkout page are available in  Dashboard -> Appearance -> Customize -> WooCommerce -> Checkout (check image), and are as follows:

Checkout Style

There are three layouts available for this page

  1. Standard (check image) - the form with the billing details on the left side and the cart totals table with the Place Order button in the right sidebar.
  2. Vertical (check image) - the form with the billing details centered and the cart totals table with the Place Order button below.
  3. Stepped (check image) - the page will be structured as a wizard with three steps, each tab displaying the information centered.

Each layout supports a boxed style that can set two colors on the page, a page background color, and another one for the tables' background ( check image ). Besides that, the table's padding is customizable and can have a different value on each device(Desktop | Tablet | Mobile).

General Options

Required/optional fields (check image) - some fields can be optional, required, or hidden. Those are Company name, Address line 2, and Phone field.

Highlight required fields with an asterisk (check image) - display a red asterisk near the required fields.

Enable Fixed Order Box (check image) - this option is available only for the Standard layout

Use Labels as Placeholders (check image) - it places the fields labels inside them and reduces the table height.

Show Order Note (check image) - display the Additional information form.

Show Coupon (check image) - display the coupon field.

Privacy policy page (check image) - set the desired text and page.

Terms and conditions (check image) - set the desired text and page.


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.


6. Off-canvas sidebar for the Shop page

Neve offers multiple customizations options for the layout. These options can be found in  Appearance > Customize > Layout > Content/Sidebar. There is where you can opt-in for the sidebar layout to be the same on the entire site, or to 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 the default none, left and right sidebar options for the Shop page, but there is also a fourth option, for an off-canvas sidebar. In that mode, the sidebar is hidden by default, and it slides in from the left side of the screen when clicking on the dedicated sidebar button.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.