The “Product Add to Cart” Block enables you to add a button to the details page of a product that is commonly known as the “Add to Cart” button. Your customers can easily add their desired product to the cart by clicking on that button.
With this Block, you can also customize the necessary styles for the button to suit your needs.
Why Add to Cart Button used? #
On the Single Product Template, “WL: Add to Cart Button” Block is used to add a Product to the Cart page on WooCommerce. The “Add to Cart Button” Block is mainly designed for the Single Product Template.
Steps of adding Product Add to Cart #
Go to WordPress Dashboard > WooLentor > Settings > Gutenberg. From the list of Gutenberg, turn ON the “Product Add to Cart” Block.
- You need to use the “Add to Cart Button” Block to add a Product to your Cart page.
- To add an Add to Cart Button Block, Drag and drop the “WL: Add to Cart Button” Block onto the Single Product Template.
Step 1: How to Enable Add to Cart Button Block? #
Go to Dashboard > WooLentor > Settings > Gutenberg. From the list of Gutenberg, turn ON the Product Add to Cart Block.
Step 2: How to use Add to Cart Button Block? #
If you want to leverage the Add to Cart Button Block on your WooCommerce store, you will need to use a Block named “WL: Add to Cart“. To do so, simply search the Block in the Elementor Block panel, and use it on the corresponding template that you have created for the Single Product Template. Check out the process to easily understand how to add the WL: Add to Cart, see the GIF image, or follow the manual steps below.
Go to Dashboard > WooLentor > Template Builder. Click the “Add New” button on the top right beside the text “Template Builder” to create a Single Page Template
Set the name of your Template in the popup box for template settings. Then click the “Set Default” checkbox after selecting Single from the dropdown type list. You can choose a default sample design from the “Sample Design” button. Now click the “Save Settings” button to save your settings.
To add the Product Price Block, click the “Edit with Gutenberg” button to edit the Single Page Template
To add an Add to Cart Button Block, search by “Add to Cart” and use the Block that has the “WL Badge”.
Drag and drop the WooLentor Add to Cart Button Block onto the Single Product Template.
Step 3: How to customize Add to Cart Button Block? #
You can easily change the Color, Size, Padding, Border Type, Border Radius, and Background as you need.
Step 4: Now visit the site #
Visit the Single Product Template to Preview.
From the style, and setting, make necessary customization from the available options.