Add to Cart button, dark mode CSS

[goclimbing]

Site:
https://psbullion.kinsta.cloud/

In the modal popup for the six products the add to cart button no longer works using $product->add_to_cart_url();. how do i generate a button add to cart and pop out the slide out cart?

Here in git when we hover buttons top right we get Tooltips. Looking into best way to implement that.

Also the account icon here on git shows our image if it's available. Ideas on adding that?

Trying to change add to cart and checkout etc. buttons to our gold secondary with this. Are those targeted buttons? Going with gold and white text in dark mode. Using this code from the Docs but it doesn't appear to change anything.

/**
 * Change dark mode btn class
 */
function dark_mode_button_class()
{
  return "btn btn-secondary";
}
add_filter('bootscore/class/dark_mode/dropdown/button', 'dark_mode_button_class', 10, 2);

[crftwrk]

For further discussions: Please open for each question a new discussion. This will avoid long and messy answers and will help other users who have the same question to find their answer. Thank you!

Add-to-cart button in loop

In the modal popup for the six products the add to cart button no longer works using $product->add_to_cart_url();. how do i generate a button add to cart and pop out the slide out cart?

I do not know how if your code is plain HTML or using PHP to show the products.

• If it's HTML, you can use a shortcode [add_to_cart id=”99”] to add the add-to-cart button, see https://woocommerce.com/document/woocommerce-shortcodes/.
• If it's PHP, use the <?php do_action( 'woocommerce_after_shop_loop_item' ); ?> hook. This is how WC adds the button to the loop items.

bootscore/woocommerce/content-product.php

Lines 65 to 71 in e66f4d5

	/**
	* 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');

The add-to-cart buttons triggers the offcanvas-cart. As far as i know, both modal and offcanvas cannot be open at the same time. Means that you need some custom code that closes modal first if product is added to the cart and then opens the offcanvas. I think using the add-to-cart inside a modal is not a good idea.

Tooltips

Here in git when we hover buttons top right we get Tooltips. Looking into best way to implement that.

Header buttons are offcanvas togglers using data-bs-toggle="offcanvas". Tooltips using data-bs-toggle="tooltip", it is not possible to use data-bs-toggle twice on a button.

Image

Also the account icon here on git shows our image if it's available. Ideas on adding that?

You can use a snippet like this and roughly paste it somewhere in your header.php:

<?php
if (is_user_logged_in()) {
    $current_user = wp_get_current_user();
    $gravatar_url = get_avatar_url($current_user->ID, ['size' => 96]); // Adjust size if needed
    $dashboard_url = wc_get_account_endpoint_url('dashboard');
    ?>

    <div class="user-gravatar-dashboard">
        <a href="<?php echo esc_url($dashboard_url); ?>">
            <img src="<?php echo esc_url($gravatar_url); ?>" alt="<?php echo esc_attr($current_user->display_name); ?>" class="user-gravatar">
        </a>
    </div>

    <?php
} else {
    echo '<p>Please <a href="' . esc_url(wp_login_url()) . '">log in</a> to access your dashboard.</p>';
}
?>

Buttons

Trying to change add to cart and checkout etc. buttons to our gold secondary with this. Are those targeted buttons? Going with gold and white text in dark mode. Using this code from the Docs but it doesn't appear to change anything.

This code is only for the dark mode button and seems to work fine?

All other buttons are btn-primary. Change primary color in _bootscore-variables.scss or do CSS overrides to change them. There is no filter available to change them into another class available yet.

Solved?