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 Appearance > Neve Options > Neve Pro.

3

Scroll down  and click on the yellow notice to install the Sparks plugin, in order to use 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 customizations available in Neve Pro. These can be seen in Appearance > Customize > WooCommerce > Product Catalog.

 General

This is the area where you can customize:

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

 Page Layout

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 ) 

 Product Card

This is the area where you can customize:

• 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.
• 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.
  • 📝Note: The quick view can provide you with information about the quantity of the products. In order to do this, download the child theme, navigate to functions.php and add this line of code: add_filter( 'sparks_hide_quick_view_qty', '__return_false'); .Click here for the result.

• 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 to the wishlist page, make sure you add the Wish List component in the Header builder. 
• Enable Variation Swatches - this is an option of the WooCommerce Booster Module, that allows you to configure a variable product ( e.g. depending on its colors ).

 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.

 Card Content

This area contains settings for the appearance of the card: 

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

 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}%.

 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

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.
• 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 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. Those are the products that you recommend instead of the currently viewed product.
• 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

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

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

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

 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.

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

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

• 📝Note: You can boost the website's appearance by using the Gradient option that can be accessed from the Page Background color or Box Background.

 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.

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

🗂Useful Resources

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

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