Divi includes a WooCommerce Products module (formally called the Shop module), which can display a grid of products from your WooCommerce store. Here's how to add an "Add to Cart" button to the products in the products module, and some tips for configuring these buttons.
Enabling "Add to Cart" Buttons in the WooCommerce Products Module
While there isn't currently a built-in option to enable "Add to Cart" buttons in the WooCommerce Products module, there are various tutorials on the web (such as this one) all offering variations of the following PHP code snippet:
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10);Related Post: Adding PHP to the Divi Theme
Disable the "Add to Cart" buttons after they are clicked
If the product can only be added once, you may want to disable the button once it has been used. You can do so by adding the following jQuery to your site:
<script>
jQuery(function() {
jQuery(document).on(
'click',
'.et_pb_shop .ajax_add_to_cart',
function() {
jQuery(this).css('pointer-events', 'none');
}
);
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Change the "Add to Cart" button text when clicked
To change the text displayed on the add to cart button, e.g. to "Added to Cart", add the following jQuery to your site:
<script>
jQuery(function() {
jQuery(document).on(
'click',
'.et_pb_shop .ajax_add_to_cart',
function() {
jQuery(this).text('Added to Cart');
}
);
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
0 Comments