Modifying Bootstrap CSS in Shop page(s)

[goclimbing]

I'm trying to figure out where the best place to start to change the design elements in the Shop pages. I'd like the cards to be the same as the ones I developed for the rest of my site.

Example:
https://psbullion.com/2026-new-arrivals/

Should look like any of the four column rows on:
https://psbullion.com/

I dug around looking for filters in the docs but didn't find anything that stuck out. Figured since so much is hooked that would be the place to start.

We're working for having a very consistent presentation - same gutter widths, buttons at the bottom that respond when hovered. Would be nice to have the border color change based on the category. I can probably figure out a lot of that if I can figure out where to start.

[crftwrk]

You can use the WooCommerce actions for this by closing/opening divs with priority order:

bootscore/woocommerce/content-product.php

Lines 65 to 71 in 205fbe7

	/**
	* Hook: woocommerce_after_shop_loop_item.
	*
	* @hooked woocommerce_template_loop_product_link_close - 5
	* @hooked woocommerce_template_loop_add_to_cart - 10
	*/
	do_action('woocommerce_after_shop_loop_item');

This wraps the button into a card-footer:

// Close card-body before add to cart and open new card-footer
add_action(
  'woocommerce_after_shop_loop_item',
  function () {
    echo '</div><div class="card-footer">';
  },
  9 // before add to cart (10)
);

Fine-tune this with a closing div action hook after the button using priority.

Following will roughly create something like your example:

// Close card-body before add to cart and open new card-footer
add_action(
  'woocommerce_after_shop_loop_item',
  function () {
    echo '</div><div class="card-footer p-0">';
  },
  9 // before add to cart (10)
);

Again, double check a closing div after the button.

Add some CSS to style the cards in loop and add individual colors using the .product_cat-* class:

.type-product {

  &.card {
    overflow: hidden; // Prevent button border-radios to overflow the card
  }

  .btn {
    border-radius: 0;
  }
}


// Use category class to style loop cards individually for each category 
.product_cat-music {
  border-color: #a08f56;

  .btn {
    --#{$prefix}btn-bg: #a08f56;
    --#{$prefix}btn-border-color: #a08f56;
    --#{$prefix}btn-hover-bg: #8f804d;
    --#{$prefix}btn-hover-border-color: #8f804d;
  }
}

If this does not fit your needs, you can override the content-product.php in your child, but it's not recommended.

Solved?

[goclimbing]

Solved! Thank you so much! Here's the final implementation. Added border width and fixed product margin. Also not sure why I can't use the variable $psb-gold in the .btn

.type-product {

&.card {
overflow: hidden; // Prevent button border-radios to overflow the card
}

.card-footer{
padding: 0px !important;
border: 0px !important;
}

.btn {
border-radius: 0;
}
}

.woocommerce div.product {
margin-left: 0% !important;
margin-right: 0% !important;
}

// Use category class to style loop cards individually for each category
.product_cat-gold {
border-color: $psb-gold !important;
border-width: 2px;

.btn {
--#{$prefix}btn-bg: #a08f56 !important;
--#{$prefix}btn-border-color: #a08f56 !important;
--#{$prefix}btn-hover-bg: #8f804d !important;
--#{$prefix}btn-hover-border-color: #8f804d !important;
}
}

#functions.php
#modify /shop layout page

// Close card-body before add to cart and open new card-footer
add_action(
'woocommerce_after_shop_loop_item',
function () {
echo '</div><div class="card-footer">';
},
9 // before add to cart (10)
);

// Close card-body before add to cart and open new card-footer
add_action(
'woocommerce_after_shop_loop_item',
function () {
echo '</div><div class="card-footer p-0">';
},
9 // before add to cart (10)
);