如何在 WooCommerce 中添加自定义添加到购物车按钮

已发表: 2021-04-22

在 WooCommerce 中添加自定义添加到购物车按钮您是否正在寻找在任何页面上添加自定义添加到购物车按钮的方法？添加到购物车按钮在任何在线商店中都非常重要。当客户单击此按钮时，产品将添加到购物车中。

它直接导致销售和收入。

因此，如果您想创建一个包含待售产品的页面，添加自定义添加到购物车按钮非常重要。

值得注意的是，WooCommerce 为您提供了许多不同级别的自定义选项，例如 WordPress。

如何在 WooCommerce 中添加自定义添加到购物车按钮

在这篇文章中，我们将自定义添加到购物车按钮并将其添加到任何模板页面。值得一提的是，在继续之前，您需要一些编码技能。

但是，如果您对处理代码不满意，请继续阅读，因为我们已尽力解释每个步骤。

让我们看看如何实现这一目标：

在 WooCommerce 中添加自定义添加到购物车按钮的步骤

在我们开始之前，这里是将按钮添加到任何模板页面的代码片段。

<?php
/* Template  Name: Customize Add To Cart*/
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <ul class="products">
            <?php
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 12,
            );
            $loop = new WP_Query( $args );
            if ($loop->have_posts()) {
                while ($loop->have_posts()) : $loop->the_post();
                    ?>
                    <div id="product-image1">
                        <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
                           title="<?php echo esc_attr( $product->get_title() ); ?>">
                            <?php echo $product->get_image(); ?>
                        </a>
                    </div>
                    <div id="product-description-container">
                        <ul>
                            <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
                               title="<?php echo esc_attr( $product->get_title() ); ?>">
                                <li><h4><?php echo $product->get_title(); ?></h4></li>
                            </a>
                            <li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
                            <li><h2><?php echo $product->get_price_html(); ?> </h2></li>
                            <?php
                            echo apply_filters(
                                'woocommerce_loop_add_to_cart_link',
                                sprintf(
                                    '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
                                    esc_url( $product->add_to_cart_url() ),
                                    esc_attr( $product->get_id() ),
                                    esc_attr( $product->get_sku() ),
                                    $product->is_purchasable() ? 'add_to_cart_button' : '',
                                    esc_attr( $product->product_type ),
                                    esc_html( $product->add_to_cart_text() )
                                ),
                                $product
                            );?>
                        </ul>
                    </div>                     <?php endwhile;
            } else {
                echo __( ' o products found' );
            }
            wp_reset_postdata();
            ?>
        </ul>
        <!--/.products-->         </main>
    <!-- #main -->
</div><!-- #primary --> <?php
do_action( 'storefront_sidebar' );
get_footer();

怎么运行的

这段代码很容易理解。

'post_type' => 'product' 是默认的 WooCommerce 自定义帖子类型。

'posts_per_page' => 12 设置可以在页面上显示的最大帖子数。
apply_filters( 'woocommerce_short_description', $post->post_excerpt ) 显示购物车的页面 URL 和购物车中的商品
esc_attr( $product->get_id() ) 获取产品 ID
esc_attr( $product->get_sku() ) 获取产品的 SKU

以下是您需要遵循的步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将添加自定义添加到购物车按钮的函数。
将以下代码添加到php文件中：

add_filter('woocommerce_product_single_add_to_cart_text','njengah_add_to_cart_button_woocommerce');

function njengah_add_to_cart_button_woocommerce() {

return __('Custom add to cart button code', 'woocommerce');

}

这是结果：

结论

现在，您应该能够添加自定义添加到购物车按钮。自定义按钮很重要，因为它为用户体验增加了价值。

由于我们使用自定义代码编辑页面，我们建议创建一个子主题。这将确保您的更改在更新期间不会丢失。

类似文章

100 多个提示、技巧和片段终极 WooCommerce 隐藏指南
注销后 WooCommerce 重定向 [终极指南]
WooCommerce 结帐后重定向：重定向到自定义感谢页面
如何在 WooCommerce 中将搜索添加到商店页面
如何在购物车页面 WooCommerce 上隐藏产品图片
如何在 WooCommerce 中发送有关状态更改的电子邮件
如何在 WooCommerce 注册表单中添加字段
如何在 WooCommerce 中隐藏商店
如何在 WooCommerce 中获取当前产品类别名称
前 30 多个最佳 WordPress 表单插件 » 最佳 WordPress 表单插件
如何更改结帐端点 WooCommerce
如何保持 WooCommerce 描述选项卡默认打开
如何在 WooCommerce 中创建自定义类别页面
如何在 WooCommerce 中注销时清除购物车
如何自定义 WooCommerce 产品页面
如何将货币添加到 WooCommerce [自定义货币]
如何检查用户是否登录WordPress
如何创建自定义订单接收页面 WooCommerce
如何在 WooCommerce 中以编程方式将产品添加到购物车
5+ 像专业人士一样限制 WordPress 摘录长度的有用方法