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:
Shop |
Product |
Cart |
Checkout |
🎥Video - How to customize the WooCommerce Page Shop Page using Neve Pro |
|
🎥Video - How to customize the Cart and Checkout Pages in Neve Pro |
Advanced options are included in this module:
Multi-Announcement Bars |
Variation swatches |
Comparison table |
Advanced Reviews |
Products featured video |
Off-canvas sidebar for the Shop page |
Tabs Manager for Products |
Custom Thank You Page |
🖲️ 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 |
Page Layout |
||
Product Card |
Category Card |
||
Card Image |
Card Content |
||
Sale tag |
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 / subcategories / products & subcategories. products
- Default product sorting - you have the possibility to choose between: / custom ordering + name / popularity (sales) / sort by price( asc / desc). sort by most recent
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 ( this will add a toggle on the Shop page, which will display the products either in a grid view or a list view ) enabled
📝 Note: There are Typography options for this page, in Dashboard > Appearance > Customize > Typography > WooCommerce.
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 image / after image. over
- 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 image/ over.
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.
- 📝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:
- 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 ( 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. same height
- Image style - another useful option is to select a 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. hover effect
Card Content
This area contains settings for the appearance of the card:
- Elements Order - easily (by clicking the 👁️ button) and enable / disable elements in the product box ( title, reviews, price, category, and the short description ). reorder
- Alignment - it represents the alignment of the product's details / left-aligned, right, or center. 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 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. review
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}%.
📝 Note: Typography options for the sale tag are available in Dashboard > Appearance > Customize > Typography > WooCommerce.
📝 Note: If you want to know how to have multiple different badges, follow this doc.
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 |
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 from the home page to the current product path
- 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 - the presence of the related products enables
- Enable Related Products Slider - display the related products in a carousel
- Number of Related products - type the desired of related products number
- Number of Columns - type how many you want to be displayed columns
📝 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:
- of the button - can be either at the bottom of the page header or above the page footer. Position
- Color and background color - modify the of the section where the button is displayed.
color
- 📝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.
📝 Note: There are Typography options for this page that can be found 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 when scrolling the page down. sticky
- Show Cross-Sell Products - display a table with configured on the individual products. cross-sells
- Enable Payment Icons - show in the Cart's total table. Those just inform the user which payment methods are available. payment icons
📝 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:
- - the form with the billing details on the left side and the cart totals table with the Place Order button in the right sidebar. Standard
- - the form with the billing details centered and the cart totals table with the Place Order button below. Vertical
- - the page will be structured as a wizard with three steps, each tab displaying the information centered. It also has some settings (⚙️) available. Stepped
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.
📝 Note: 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 - some can be optional, required, or hidden. Those are the Company name, Address line 2, and Phone field. fields
- Highlight required fields with an asterisk - display a red near the required fields. asterisk
- Enable Fixed Order Box - this is available only for the Standard layout option
- Use Labels as Placeholders - it places the fields inside them and reduces the table height. labels
- Show Order Note - display the information form. Additional
- Show Coupon - display the field. coupon
- Privacy policy page - set the desired text and page.
- Terms and conditions - set the text and page. desired
🎥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 to the desired video, customize the video however you want, and click on Publish/Update. link
💡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.