Creating Custom Add To Cart Button for the Post Loop Builder’s Global Block

In this tutorial, we show you how you can create the custom Add To Cart button into the Post Loop Builder’s global block. We use the native Wrapper Link element, dynamic data, element conditions, and WooCommerce’s inbuilt CSS classes.

Follow the video

CSS

The following CSS is used in this tutorial. You can edit and use them for your site.

.product_type_simple.button.loading > * {
  opacity: 0.35;
}
.product_type_simple.button.loading::before {
  opacity: 1;
}
.product_type_simple.button.loading::after,
.ee-post .added_to_cart.wc-forward {
  display: none;
}
.product_type_simple.button::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  left: 35%;
  transform: translate(-50%, -50%);
  mask-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='currentColor' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
  background-color: currentColor;
  mask-position: 0 0;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='currentColor' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
  opacity: 0;
  animation: posts-list-loading-spinner 1.5s linear infinite;
}