在Woocommerce中单击Cart Button后将Add to Cart Button更改为查看Cart Button

Question

我有一个Wordpress网站。我正在使用WooCommerce的店面主题。我已经启用ajax添加到购物车按钮。当单击“添加到购物车”按钮并成功地将产品添加到购物车时，我希望该按钮更改为“查看购物车”按钮(将文本更改为“查看购物车”，并链接到购物车)。如果可能的话，我也想以不同的方式设置按钮，以区别于标准的add to cart按钮。php代码是什么样子的？

Answer 1

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

​

​

这已由woocommerce jQuery脚本完成，该脚本在“添加到购物车”按钮后添加“查看购物车”按钮，链接到cart页面…

如果您愿意，可以隐藏“添加到购物车”按钮，如单击时会出现一个额外的类"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>

因此，使用CSS，您可以在display: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…