New style of cart button when item is in cart in WooCommerce(当商品在WooCommerce的购物车中时,购物车按钮的新样式)
本文介绍了当商品在WooCommerce的购物车中时,购物车按钮的新样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果商品已在购物车中,我使用代码更改该产品的"添加到购物车"按钮的文本。
/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
function single_product_button_text( $text ) {
if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
$text = 'Product in cart';
}
return $text;
}
/* for archive/category pages */
add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 );
function products_button_text( $text, $product ) {
if(
$product->is_type( 'simple' )
&& $product->is_purchasable()
&& $product->is_in_stock()
&& WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
) {
$text = 'Product in cart';
}
return $text;
}
告诉我,如果产品已添加到购物车中,您如何更改该产品的添加到购物车按钮的样式?
我尝试将代码添加到/loop/Add-to-cart.php文件,如下所示Change add to cart button style when product is in cart in Woocommerce,但对我无效。
是否有其他代码选项可以帮助解决我的问题?
我将很高兴得到您的帮助!
推荐答案
一种方法是通过jQuery
检查某个元素(您的添加到购物车按钮)是否包含某个文本,如果是这样,我们将添加一个额外的类,您可以通过CSS
设置样式。
:contains() Selector-选择包含指定文本的所有元素。
因此您得到:
function action_wp_footer() {
?>
<script>
jQuery(document).ready(function($) {
var selector = '.add_to_cart_text:contains("Product in cart")';
// Selector contains specific text
if ( $( selector ).length > 0 ) {
$( selector ).addClass( 'product-is-added' );
} else {
$( selector ).removeClass( 'product-is-added' );
}
});
</script>
<?php
}
add_action( 'wp_footer', 'action_wp_footer' );
注意:根据您使用的主题,选择器(类)的名称可能会有所不同
这篇关于当商品在WooCommerce的购物车中时,购物车按钮的新样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:当商品在WooCommerce的购物车中时,购物车按钮的新样式
基础教程推荐
猜你喜欢
- Libpuzzle 索引数百万张图片? 2022-01-01
- 在多维数组中查找最大值 2021-01-01
- 如何在 PHP 中的请求之间持久化对象 2022-01-01
- 超薄框架REST服务两次获得输出 2022-01-01
- WooCommerce 中选定产品类别的自定义产品价格后缀 2021-01-01
- 在 PHP 中强制下载文件 - 在 Joomla 框架内 2022-01-01
- mysqli_insert_id 是否有可能在高流量应用程序中返回 2021-01-01
- 通过 PHP SoapClient 请求发送原始 XML 2021-01-01
- 在 Woocommerce 中根据运输方式和付款方式添加费用 2021-01-01
- XAMPP 服务器不加载 CSS 文件 2022-01-01