Including a sticky add-to-cart button to your WooCommerce product pages is an effective way to be sure that your prospects can simply add a product to their cart from anyplace on the web page. It additionally nudges undecided guests towards shopping for your merchandise.
A sticky add-to-cart button may, due to this fact, increase your website’s buyer satisfaction and conversion charges.
WooCommerce doesn’t provide a local sticky add-to-cart characteristic. Nonetheless, you should utilize a plugin, comparable to Botiga Professional, to present the performance.
On this tutorial, I’ll present you the way to add sticky add-to-cart buttons to your WooCommerce product pages.
1. Set up & Activate the Botiga WooCommerce Theme
Botiga is a free WooCommerce theme whereas Botiga Professional is a premium plugin that extends the theme with superior performance.
You’ll want each the theme and the plugin to add sticky add-to-cart WooCommerce buttons to your website.
Our Botiga theme is likely one of the hottest free WooCommerce themes in the market.
You possibly can obtain it right here or discover it in the official WordPress theme repository.
Then, open your WordPress dashboard and go to Look > Themes > Add New > Add Theme.
Click on the Select File button to add the theme, then hit the Set up Now button.
As soon as the theme is put in, click on the Activate button:
Alternatively, you’ll be able to go to Look > Themes > Add New, enter “Botiga” into the search bar, and click on the Set up, then the Activate buttons:
2. Set up & Activate the Botiga Professional Plugin
Botiga Professional is a premium WordPress plugin that provides additional performance to the free Botiga theme.
It offers you entry to many spectacular options, together with dimension charts, audio and video galleries, mega menus, pre-designed starter websites, sticky add-to-cart buttons, and extra.
Since Botiga Professional is a premium plugin, you’ll want to buy it right here earlier than importing it to your WordPress website (pricing begins at $69 a 12 months).
Upon getting the plugin, go to your WordPress dashboard and navigate to Plugins > Add New > Add Plugin.
Use the Select Recordsdata possibility to add Botiga Professional, then click on the Set up and Activate buttons to set up the plugin in your website.
Subsequent, you’ll want to activate your license. Copy the license key out of your Botiga account, then go to Botiga > Settings > Basic. Enter the license key and click on the Save Adjustments button to activate the plugin:
3. Import a Starter Website (elective)
Starter websites are ready-made web sites you could import into your WooCommerce retailer. Botiga Professional presents numerous well-designed, highly effective starter websites for numerous eCommerce niches.
Though importing a Botiga starter website is elective, and you may as well select to begin designing your retailer from scratch utilizing Botiga’s customization choices, I like to recommend that you just go forward with it as a result of it is going to give your WooCommerce retailer an expert look (you could nonetheless additional customise).
You possibly can try the starter websites by going to Botiga > Starter Websites and preview every website utilizing the Preview button.
If you discover a website that you just like, hit the Import button:
As quickly as you achieve this, a popup will seem displaying you the weather (e.g. content material, widgets, Customizer settings, and so on.) that the demo installer will add to your web site.
You’ve got the choice to deselect any of the weather, however I like to recommend holding all of them.
It’s also possible to select between importing your complete starter website (together with the content material, photos, and so on.) or only a placeholder (which refers to the format of the positioning):
It should take a couple of minutes for the demo installer to full the import course of.
4. Allow the Module
After putting in the plugin and importing the starter website, it’s time to add the sticky add-to-cart buttons to your WooCommerce product pages.
The Product Sticky Add to Cart characteristic is disabled by default and wishes to be enabled manually.
In your WordPress admin space, go to Botiga > House. Right here, you’ll discover the Product Sticky Add to Cart module in the Do extra with Botiga Professional part.
Activate the module by clicking the Activate button:
That’s it. Now, you ought to be in a position to see a sticky add-to-cart WooCommerce button on every of your product pages.
The sticky add-to-cart button seems on the backside of the product web page subsequent to a short product abstract, together with a small thumbnail picture, the value, the obtainable colours, and the variety of objects, inside a full-width add-to-cart bar:
5. Configure the Add-to-Cart Bar
You possibly can customise the looks of the add-to-cart bar from the WordPress Customizer.
You possibly can entry the related Customizer choices from the Product Sticky Add to Cart module.
Click on the Customise hyperlink in the module’s field on the Botiga > House admin web page to open the module’s settings:
Alternatively, you’ll be able to entry the Customizer the common manner, from the Look > Customise menu:
When the Customizer opens, go to the WooCommerce > Single Product > Sticky Add to Cart part the place you’ll be able to modify the add-to-cart bar utilizing the obtainable design and format choices:
You get entry to the next choices:
i. Place: By default, the add-to-cart bar seems on the backside of the display screen, however you’ll be able to change its place to the highest utilizing this selection.
ii. Components: As talked about above, the add-to-cart button seems together with numerous different components such because the product thumbnail picture, value, colour, and a product counter. To exclude any of those components, click on the attention icon subsequent to the component you need to take away.
iii. Components Spacing: Right here, you’ll be able to outline the horizontal spacing between the weather contained in the add-to-cart bar.
iv. Conceal When Scroll to Prime: This feature permits you to cover the add-to-cart bar when the customer views the highest of the product web page (as there’s one other add-to-cart button there).
v. Enable Third-Get together Plugins Content material: Right here, you’ll be able to allow Botiga to present content material from third-party plugins contained in the add-to-cart bar.
vi. Visibility: This feature permits you to present the button on solely desktop units, solely cellular units, or all units.
Conclusion
Including a sticky add-to-cart button to your WooCommerce retailer isn’t a troublesome process so long as you’ve entry to the appropriate instruments.
Botiga is a wonderful free theme and when coupled with the highly effective Botiga Professional plugin, it supplies you with many superior eCommerce options, together with trendy sticky add-to-cart buttons in your product pages.
Including a sticky add-to-cart WooCommerce button to your website with Botiga Professional is as simple as hitting the Activate button.
Customizing the add-to-cart bar can be simple and may be finished from the reside Customizer so as to see the modifications you’re making in actual time.
Do you’ve any questions on how to add a sticky add-to-cart button to your WooCommerce retailer? Tell us in the remark part under.
