Skip to main content

[Thủ Thuật WP] Hướng dẫn thay đổi html button "Add to cart" Woocommerce

Mục lục:

Hướng dẫn thay đổi html button "Add to cart" trong Woocommerce để bạn có thể dễ dàng thay đổi cấu trúc html button dễ dàng, từ đó giúp bạn dễ dàng thay đổi custom bất cứ cái gì mình thích.

Để làm được điều đó bạn sẽ sử dụng filter của woocommerce cung cấp woocommerce_loop_add_to_cart_link.

Dưới đây là đoạn code được thêm vào file functions.php của theme ngắn giúp bạn thêm class vào button "Add to cart". 

function npd_woocommerce_loop_add_to_cart_link_filter( $link, $product, $args ){

    $args['class']    = $args['class'] . ' isures-global--button';
    $link = sprintf(
		'<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
		esc_url( $product->add_to_cart_url() ),
		esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
		esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
		isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
		esc_html( $product->add_to_cart_text() )
	);
	return $link;
}

add_filter( 'woocommerce_loop_add_to_cart_link', 'npd_woocommerce_loop_add_to_cart_link_filter', 4, 3 );

Ngoài ra bạn cũng có thể thay đổi