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:

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.

Advanced features of the WooCommerce Booster module are available in the module accordion. More details on each can be found by clicking on the Learn More links.

Multi-Announcement Bars

Variation swatches

Comparison Table


Shop page

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

General
Page Layout
Product Card
Category Card
Card Image
Card Content
Sale tag
A

 General

This is the area where you can customize:

B

 Page Layout

margin: auto; width: 780px;

This is the area where you can customize:

  • Number of products per row - it represents the number of products displayed on each row, from 0 up to 6.
  • Number of 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 works along with the sorting, can be disabled if needed. 
  • Layout toggle - it works along with the product's card layout, 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.

C

 Product Card

This is the area where you can customize:

  • Layout - it can modify the way that the products are displayed: grid / list.
  • Box shadow (px) - it adds a shadow around the product's box and has a Reset button.
  • 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.
  • Quick view - it is the button that allows the customer to have a quick look at the product and has three options of display: none / over image/ bottom.
  • Wish List -  it will automatically add the selected products to a special list of favorite products and has three options: none / top / bottom.
    • To navigate the wishlist page, make sure you add the Wish List component in the Header builder
D

 Card Image

This is the area where you can customize:

  • Force Same Image Height - it makes all your products use the exact same height ( no matter their individual sizes ) Once that option is selected, you get 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 (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.
E

 Card Content

In this area there are three options available:

  • Elements Order - easily enable / disable (by clicking the 👁️ button) and reorder elements in the product box ( title, reviews, price, category, and the short description ).
  • Alignment - it represents the alignment of the product's details left / right-aligned, center, or inline.
  • 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.
F

 Sale tag

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

  • Position - inside the product box, or just on the edge
  • 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}%.

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

If you want to know how to have multiple different badges, follow this doc.

G

 Category Card

This is the area where you can choose the desired  layout for the category card:


Single Product Page

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

Elements Order
Related Products
Sticky Add to Cart
Exclusive products

A

 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 following options can be enabled on the product page, in case you need them:

  • Elements Order - it can modify the order of the mentioned details of the product.
  • Enable Gallery Thumbnails Slider - 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 - display the path from the home page to the current product
  • Show Product Tabs - 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 - display the upsells configured in the product settings (⚙️) below the description.
  • 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.
B

In this area there are four available options:

  • 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 on how many columns you want to be displayed
C

 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. 
  • Enable Tabs in the Sticky Add to Cart - the tabs are product's Description, 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.

D

 Exclusive Products

This is a section on the product page that allows you to edit its:

  • Title - it is the title of the exclusive products section.
  • Category - it is the category of the products that will be displayed.

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


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.

Checkout Page

The available  options for the checkout page are:

A

 Checkout Style

margin: auto; width: 835px;

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.

Besides that, the table's padding is customizable and can have a different value on each device(Desktop | Tablet | Mobile).

B

 General Options

  • 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.

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:

Step 1:

Go to Dashboard > Products and choose the desired product.

Step 2:

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

Step 3:

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

Check for the updates on the website's page.

Result:


Off-canvas sidebar for the Shop page

Neve offers multiple customization options for the layout. 

These options can be found in  Appearance > 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
  • stick
  • right  
  • 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.


Multi-Announcements bars

Multi-Announcements bars can be created within the Dashboard and those will be automatically triggered by certain actions. Below is an example of offering a free product based on the ones added to the cart.

Start by navigating to Dashboard > Marketing > Announcement Bars, create a new one, and use the Cart notice block.

Before styling the notice and set actions, a coupon needs to be configured with a 100% discount for the pair of socks.

Now that a coupon is available, the button within the announcement bar can be configured to automatically add the free pair of socks to the cart. Make sure you set the button link to the desired product.

The announcement bar can be triggered by certain products that are added to the cart.

Magic tags can be used to show the name of the product that was added to the cart and triggered the announcement bar.

If the product triggering the announcement bar is added to the cart, the offer applies by clicking the button within the notice.

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