Add quot;View Productquot; button below add to cart button in WooCommerce archives pages(添加“查看产品下面的按钮添加到 WooCommerce 档案页面中的购物车按钮)
问题描述
互联网上的大多数文章都是关于如何删除/替换查看产品"或阅读更多"按钮.
我找不到与允许两个按钮一起使用的相关信息.
我有兴趣让两个按钮并行工作(同时).要显示的第一个按钮应该是查看产品"(在同一页面上打开)然后在加入购物车"
下方目前,我的商店只显示加入购物车按钮.我正在使用店面主题(+ 自定义子主题).
有没有好心人告诉我怎么做?
使用这个挂在 woocommerce_after_shop_loop_item
动作钩子中的自定义函数,添加链接到产品的自定义按钮(变量和分组产品类型除外):
add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5);函数 add_a_custom_button() {全球$产品;//不适用于没有添加到购物车"按钮的可变和分组产品if( $product->is_type('variable') || $product->is_type('grouped') ) return;//输出链接到产品的自定义按钮echo '<div style="margin-bottom:10px;"><a class="button custom-button" href="' .esc_attr( $product->get_permalink() ) .'">'.__('查看产品') .'</a>
';}
代码位于活动子主题(或活动主题)的functions.php 文件中.
在 WooCommerce 3.7.x 上测试并仍然完美运行(使用最后一个店面主题):
<小时>
嵌入你的样式(与作者评论相关):
add_action('wp_head', 'custom_button_styles', 9999);函数 custom_button_styles() {if( is_shop() || is_product_category() || is_product_tag() )://样式?><风格>.button.custom-button { 背景颜色:白色!重要;颜色:黑色!重要;边框:2px 实心 #4CAF50 !important;}.button.custom-button:hover { background-color: black !important;颜色:白色!重要;边框:2px纯黑色!重要;}</风格><?php万一;}
代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.
经过测试并有效.
Most of the articles on the internet are about How to remove / replace the "view product" or "read more" button.
I couldn't find something related to allowing both buttons working together.
I am interested in having both buttons working in parallel ( at the same time ). The first button to be displayed should be "View product" (to be opened on the same page) then underneath "Add to Cart"
At the moment, my store only displays the Add to cart button. I am using Storefront theme ( + custom child theme ).
Would anyone be so kind and tell me how to do this?
Use this custom function hooked in woocommerce_after_shop_loop_item
action hook, to add your custom button linked to the product (except variable and grouped product types):
add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5 );
function add_a_custom_button() {
global $product;
// Not for variable and grouped products that doesn't have an "add to cart" button
if( $product->is_type('variable') || $product->is_type('grouped') ) return;
// Output the custom button linked to the product
echo '<div style="margin-bottom:10px;">
<a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('View product') . '</a>
</div>';
}
Code goes in functions.php file of your active child theme (or active theme).
Tested and still perfectly works on WooCommerce 3.7.x (with last storefront theme):
Embedding your styles (related to author comments):
add_action('wp_head', 'custom_button_styles', 9999 );
function custom_button_styles() {
if( is_shop() || is_product_category() || is_product_tag() ):
// The styles
?>
<style>
.button.custom-button { background-color: white !important;
color: black !important; border: 2px solid #4CAF50 !important; }
.button.custom-button:hover { background-color: black !important;
color: white !important; border: 2px solid black !important; }
</style>
<?php
endif;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Tested and works.
这篇关于添加“查看产品"下面的按钮添加到 WooCommerce 档案页面中的购物车按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:添加“查看产品"下面的按钮添加到 WooCommer


- Mod使用GET变量将子域重写为PHP 2021-01-01
- Laravel 仓库 2022-01-01
- 如何定位 php.ini 文件 (xampp) 2022-01-01
- SoapClient 设置自定义 HTTP Header 2021-01-01
- PHP Count 布尔数组中真值的数量 2021-01-01
- 从 PHP 中的输入表单获取日期 2022-01-01
- 没有作曲家的 PSR4 自动加载 2022-01-01
- 带有通配符的 Laravel 验证器 2021-01-01
- 正确分离 PHP 中的逻辑/样式 2021-01-01
- Oracle 即时客户端 DYLD_LIBRARY_PATH 错误 2022-01-01