Primary color doesn't effect woocommerce colors

Hi there. Tried switching the primary color through customize but the colors in the woocommerce templates does not change. Changed the color from pink to black but the buy buttons, description link, price tag and reviews link did not change.

Best regards,
Magnus Finset

Hello there,

I am sorry, I found it’s a styles bug that should be corrected shortly in next version update.

Sorry for the inconvenience.

Add the mean time, you could use this CSS code:

.product .single_add_to_cart_button.button.alt {
  background-color: #fff000;
  border-color: #fff000;
}

.product a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #fff000;
}

Add it to Appearance > Customize > Additional CSS.

Regards,
Kharis

Thanks a lot, it worked but some more elements are missing. I will provide my css to fix all of the detected problems.

Including:

  • Add to cart button in top right corner in product lists

  • Price amount

      .product .single_add_to_cart_button.button.alt {
    
        background-color: #000;
        border-color: #222;
    
      }
      .product .single_add_to_cart_button.button.alt:hover {
    
        background-color: #555;
        border-color: #222;
    
      }
      .product a,
      .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
        color: #000;
      }
      .woocommerce-Price-amount.amount {
      	color:#000;
      }
      .woocommerce ul.products li.product .button {
      	background-color:#000;
      }

Hello there,

Try this PHP snippet solution, please.

    function airi_child_custom_styles() {

      $primary_color = get_theme_mod('color_primary');

      $custom  = 'body{border:10px solid green}';
      $custom .= '.elementor-heading-title{color: '.$primary_color.'}' ."\n";
      $custom .= '.product .single_add_to_cart_button.button.alt{border:2px solid '.$primary_color.'}' . "\n";
      $custom .= '.product div.entry-summary p.price,.product div.entry-summary span.price,.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:'.$primary_color.'}' . "\n";
      $custom .= '.product .single_add_to_cart_button.button.alt,.product .single_add_to_cart_button.button.alt:hover,.woocommerce ul.products li.product .button,.woocommerce-cart .cart-collaterals .cart_totals .button,.woocommerce-cart .cart-collaterals .cart_totals .button:hover,.woocommerce-checkout button.button.alt,.woocommerce-checkout button.button.alt:hover{background-color:'.$primary_color.'}' . "\n";

    	wp_add_inline_style( 'airi-style', $custom );

    }
    add_action( 'wp_enqueue_scripts', 'airi_child_custom_styles', 20, 0 );

Add it to your site, the easiest way is to use a plugin that allows PHP functions addition like Functionality.

If you have a child theme enabled, I’d highly recommend you add it to the child theme’s functions.php file.

Regards,
Kharis