WooCommerce Archive hook color and size

[darkfrizzi]

I wanted to ask you how you integrated the colours and sizes of the bootscore tshirts (visible in preview in the archives). Did you use a plugin or a shortcode ?

Thanks in advance

[crftwrk]

This is done by hook woocommerce_after_shop_loop_item_title. Basic usage:

// Function for woocommerce_shop_loop_item_title action-hook.
function bootscore_woocommerce_shop_loop_item_after_title_action(){

  echo '<p>Do something here</p>';
}
add_action( 'woocommerce_after_shop_loop_item_title', 'bootscore_woocommerce_shop_loop_item_after_title_action' );

On bootscore.me it is a bit modified to catch product(s) by id:

// Function for `woocommerce_after_shop_loop_item_title` action-hook.
function bootscore_woocommerce_shop_loop_item_after_title_action() {
  global $product;

  $target_ids = array(23262, 23285, 23333); // Add as many IDs as you need here

  if (in_array($product->get_id(), $target_ids)) :

    echo '
      <div class="product-options">
        <div class="color d-flex justify-content-center gap-1 mb-2">
          <div class="color-badge rounded-circle border"><div class="option w-100 h-100 rounded-pill sports-grey"></div></div>
          <div class="color-badge rounded-circle border"><div class="option w-100 h-100 rounded-pill charcoal"></div></div>
          <div class="color-badge rounded-circle border"><div class="option w-100 h-100 rounded-pill black"></div></div>
        </div>
        <p class="small text-body-secondary">S, M, L, XL, 2XL, 3XL</p>
      </div>
    ';

  endif;
}
add_action( 'woocommerce_after_shop_loop_item_title', 'bootscore_woocommerce_shop_loop_item_after_title_action' );

And a bit of SCSS to style the options:

.product-options {

  .color-badge {
    height: 1.25rem;
    width: 1.25rem;
    padding: 2px;
  }

  .sports-grey {
    background-color: #9EA1A2;
  }

  .charcoal {
    background-color: #5D5E62;
  }

  .black {
    background-color: #000000;
  }
}

.card.product:has(.product-options) .price {
  margin-bottom: $spacer * .5;
}

A great resource for all available hooks in WooCommerce and how to use them is https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/#more-19370

Solved?

[ashish-ask]

http://gunjatextiles.com/