How To Add ‘Add to Cart ’ button in WooComerce Using Shopping Cart Plugin
This is a step-by-step tutorial for setting up button for any product i,e. WooCommerce Add to Cart button by using the WordPress eStore plugin to adjust the sales of products from the WordPress site.
After reading this tutorial, you can easily create a “Add to Cart” button on your product sales page and sell your products.his is a step-by-step tutorial for setting up Cart Add to Cart a button for any product by using the WordPress eStore plugin to adjust the sales of products from the WordPress site.
Setup a simple ‘Add to Cart’ Button
Step 1) Think about that name, price and a little detail about the product that you want to sell.
Step 2) Configure the product by using the Add / Edit Products of WordPress eStore Plugin. After adding the product, pay attention to the ID Product ID (All product IDs can be found on the managed product page).
Step 3) Design Although you want to display the product on the post or page (the product’s landing page) from where you want to sell the product. I want to keep it very simple for this tutorial. For Example:-
Name: Product name
Description: Show the add to cart button
Price: $ 1.00
Step 4) Now, I just need to add the ‘Add to Cart’ button so that the customer can purchase it. To add the Add Add To Cart button to this product, add a shortcode below the line short price: $ 1.00 ‘.
[wp_eStore_add_to_cart id = PRODUCT-ID]
Change PRODUCT-ID with the actual product ID of the product I sold, this is 1 because it is the first product I have just configured. So I’m going to add the following text:
[wp_eStore_add_to_cart id = 1]
Step 5) The full product performance looks like the following:
Name: Product Name
Description: Displays the Add to Cart button
Price: $ 1.00
Step 6) Finally, I’m going to add the following shortcode in the post which displays the shopping cart when the item is added to the cart. You can also use the sidebar widget to display a shopping cart. This will allow customers to view their orders and complete the checkout
[wp_eStore_cart]
Feel free to hit the ‘Add to Cart’ button to see how the shopping cart appears below this line and allows a customer to buy the product
Common loss
People use the most common mistakes while using a shortcut to the ‘Common Add to Cart’ button, and therefore the button does not appear:
- Use hyphen (-) instead of underscore (_) Do not use wp_eStore wp-eStore
- Use lowercase ‘s’ instead of uppercase ‘S’ to use wp_eStore wp_estore no.
- Don’t forget to activate the plugin from the plugins menu
- Do not replace ‘PRODUCT-ID’ in the trigger text with the actual number.
How to use a custom image in the form of ‘Add to Cart’ button
If you want to add the ‘Add to Cart’ button to good, you probably want to use a custom image for the button. The WordPress eStore plugin allows you to specify a custom button image for each product. This way you can make good calls to the action button on your product’s landing page. So, through WordPress Help you can easily add a custom ‘Add To Cart’ button and it also provides lots of services.
When you configure the product, there is an optional product setting field called the URL button image URL, you can use the product to specify a custom button image.
I uploaded a custom image on my site and used that image’s URL in the ‘button image URL’ field of the product settings and now the ‘Add to Cart’ button looks like the following (I have also embedded a picture ) The product looks good so the post):
Name: Two Product
Description: Displays customized ‘Add to Cart’ button
Price: $ 1.00
The WordPress eStore plugin comes with some differences to Add to Cart and ‘Buy Now’ buttons that you can use. All images are included in the plugin’s images directory. Buttons can be added using more style CSS (stylesheets).
How to display the product in an attractive way
WP eStore comes with some product display templates that you can use to display your product in a stylish manner. Here’s an example product display template:
- Cool test product two
Some test details of the product to show what this description field looks like. You can also insert plain HTML in this description area.
Available Quantity: 44
Price: $ 50.00
After writing as above next thing is to place the “ADD TO CART” button below the price. Place the AddEnter the following shortcode to display the product given above (9 is the product ID of the product in this example):
[wp_eStore_fancy1 id = 9]
- Cool test product two
Some test details of the product to show what this description field looks like. You can also insert plain HTML in this description area.
Available Quantity: 44
After that, you need to place the “ADD TO CART” button on the left side and price on the right side or it’s vice -versa.
Or enter the following shortcode to display the above product
[wp_eStore_fancy2 id = 9]
When you configure the product for this type of display, you will need to enter the product details and thumbnail image URL.
0 comments