Add an extra class to wish list button

Hi,

How can I add extra class to wish list button? I need this to track clicks on google tag manager. Trying to integrate GTM kit plugin and they use .add_to_wishlist class to track whish lists.

Thank you.

Hi raulis,

Thanks for reaching to us.

Unfortunately, this cannot be done with Custom Code.

Regards,

How can it be done?

can’t I copy a file to child theme and add the class?

Hi raulis,

You can place custom code in functions.php in Child theme.

However, it requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Regards,

You should want to be compatible with as much llugins as possible for google tracking purpose. Especialy when it is as easy as adding one extra class.

Neverminding that, what file holds the code for add to wishlist button in catalog and in single product pages?

Thank you.

Hi raulis,

Thanks for your patience.

Add below Custom code to functions.php file in Child theme.

add_action( 'init', function () {
	if ( ( woodmart_get_opt( 'wishlist_logged' ) && is_user_logged_in() ) || ! woodmart_get_opt( 'wishlist_logged' ) ) {
		remove_action( 'woocommerce_single_product_summary', array( XTS\WC_Wishlist\Ui::get_instance(), 'add_to_wishlist_single_btn' ), 33 );
		remove_action( 'woodmart_sticky_atc_actions', array( XTS\WC_Wishlist\Ui::get_instance(), 'add_to_wishlist_sticky_atc_btn' ), 20 );

		add_action( 'woocommerce_single_product_summary', function () {
			wd_add_wishlist_btn( 'wd-action-btn wd-style-text wd-wishlist-icon' );
		}, 33 );
		add_action( 'woodmart_sticky_atc_actions', function () {
			woodmart_enqueue_js_library( 'tooltips' );
			woodmart_enqueue_js_script( 'btns-tooltips' );

			wd_add_wishlist_btn( 'wd-action-btn wd-style-icon wd-wishlist-icon wd-tooltip' );
		}, 20 );
	}

	if ( woodmart_get_opt( 'product_loop_wishlist' ) && ( ( woodmart_get_opt( 'wishlist_logged' ) && is_user_logged_in() ) || ! woodmart_get_opt( 'wishlist_logged' ) ) ) {
		remove_action( 'woodmart_product_action_buttons', array( XTS\WC_Wishlist\Ui::get_instance(), 'add_to_wishlist_loop_btn' ), 30 );

		add_action( 'woodmart_product_action_buttons', function () {
			wd_add_wishlist_btn( 'wd-action-btn wd-style-icon wd-wishlist-icon' );
		}, 30 );
	}
}, 300 );

function wd_add_wishlist_btn( $classes = '' ) {
	woodmart_enqueue_js_script( 'wishlist' );

	if ( woodmart_get_opt( 'wishlist_expanded' ) && 'disable' !== woodmart_get_opt( 'wishlist_show_popup', 'disable' ) && is_user_logged_in() ) {
		woodmart_enqueue_js_script( 'wishlist-group' );
	}

	$link_classes = 'add_to_wishlist';
	$text         = esc_html__( 'Add to wishlist', 'woodmart' );
	$product_id   = apply_filters( 'wpml_object_id', get_the_ID(), 'product', true, apply_filters( 'wpml_default_language', null ) );

	$classes .= woodmart_get_old_classes( ' woodmart-wishlist-btn' );

	?>
	<div class="wd-wishlist-btn <?php echo esc_attr( $classes ); ?>">
		<a class="<?php echo esc_attr( $link_classes ); ?>" href="<?php echo esc_url( woodmart_get_wishlist_page_url() ); ?>" data-key="<?php echo esc_attr( wp_create_nonce( 'woodmart-wishlist-add' ) ); ?>" data-product-id="<?php echo esc_attr( $product_id ); ?>" rel="nofollow" data-added-text="<?php esc_html_e( 'Browse Wishlist', 'woodmart' ); ?>">
			<span><?php echo esc_html( $text ); ?></span>
		</a>
	</div>
	<?php
}

But please note that it will NOT work on a Custom Single Produc layout build with WooCommerce builder https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

WoodMart theme also has a featurethat shows which products the user has added to the wishlist https://monosnap.com/file/ZLngk3wzSbKPfYIYhgv6QLo6AHHo3w

Regards,

This seems excesive.

I have found that on woodmart/inc/integrations/woocommerce/modules/wishlist/class-ui.php
Line 499 is the html for the button. So I have added the class I need there and it seems to work perfecly fine.

The only question is if you can provide a simple shortcode to add a custom class to this place or I have to copy this whole file to my child theme to keep this change?

I attach image.

Attachments:

You must be logged in to view attached files.

Hi raulis,

Did you add above Custom Code to functions.php file Child theme file? You can keep this change as well.

Regards,

I mean if it does not add class to single product pages mage with elementor it makes no sense to use it. As The example I said, added the class everywhere.

Hi raulis,

So, you can add class to that file. I will ask developer for more details and update you once I receive replies.

Regards,

[Author]

Posts