1

我有一个 Wordpress 网站。我正在为 WooCommerce 使用 Storefront 主题。我启用了 ajax 添加到购物车按钮。单击“添加到购物车”按钮并将产品成功添加到购物车时,我希望该按钮更改为“查看购物车”按钮(将文本更改为“查看购物车”,并链接到购物车)。如果可能的话,我还想为按钮设置不同的样式,以将其与标准的添加到购物车按钮区分开来。php 代码会是什么样子?

4

1 回答 1

3

默认情况下,在 Woocommerce 中,当您单击“添加到购物车”按钮时,另一个按钮已经出现在右侧,并带有“查看购物车”

在此处输入图像描述

这已经由 woocommerce jQuery 脚本完成,该脚本在添加到购物车按钮之后添加了一个链接到购物车页面的“查看购物车”按钮……</p>

如果您愿意,您可以隐藏“添加到购物车”按钮,因为单击时"added"会出现一个附加类(请参见下面生成的代码):

<a rel="nofollow" href="/shop/?add-to-cart=741" data-quantity="1" data-product_id="741" data-product_sku="WN001-1" class="button product_type_simple add_to_cart_button ajax_add_to_cart added">Add to cart</a>

因此,您可以使用 CSSdisplay:none;只保留“查看购物车” ……

.ajax_add_to_cart.added {
    display:none !important;
}

在此处输入图像描述

然后很容易重新设置“查看购物车”按钮的样式(链接到购物车页面):

a.added_to_cart.wc-forward {
    background-color: #8c8c8c !important;
    color: white !important;
    min: .618em 2.4em !important;
}
a.added_to_cart.wc-forward:after {
    content: inherit; !important;
}

在此处输入图像描述

所以你不需要任何代码,只需要一些 CSS……</p>

于 2018-03-31T01:52:41.863 回答