在WooCommerce中添加“立即购买”按钮

在进一步讨论之前,我假设你已经熟悉了WooCommerce。如果你只是一个技术爱好者,在那里学习新东西,我会尝试为这篇文章提供一些基础知识。 WooCommerce简单如他们所说: 为WordPress构建的完全可定制的开源电子商务平台。 要了解更多信息,请单击此链接。 要查看使用WooCommerce的实际网站,请检查我正在开发的网站。转到现场演示。 典型的WooCommerce网站的工作流程如下: 用户点击Home / Shop页面上显示的任何产品。 现在,他/她正在“单一产品页面”上。此页面提供有关产品的更多深入信息。 点击“添加到购物车”按钮。该产品已添加到购物车中。 访问’购物车页面’。然后单击“结帐”按钮。 在“结账页面”填写详细信息,然后继续付款。 所有这些功能都是通过WooCommerce免费提供的,并且适用于大多数用例。 但… 每个解决方案都可以进一步优化 您是否在上述工作流程中找到了一些开销? 如果我们的用户只想购买该产品,我们真的需要第4步吗? 我们应该直接将他发送到结账页面。我们不应该吗? 所以现在我们遇到了问题: 我们需要在“添加到购物车”按钮旁添加一个简单的“立即购买”按钮,该按钮将直接将我们的用户发送到结帐页面而不是购物车页面。 让我们为此找到一些解决方案。 首先是第一件事。谷歌一下。搜索插件。 疑难杂症!。找到一个。 哦,等等。我不希望在那里显示按钮。它的风格不匹配。它看起来像开箱即用的东西。 我是一个非技术人员。我现在被困住了。我应该聘请开发人员吗? 你有这种情况吗? 不要担心人们。解决方案非常简单。跟我来吧 我假设您可以访问您的主题文件。 注意:我们永远不应该直接更新主题文件。相反,使用子主题。如果您想学习如何创建一个,请阅读本文。如果您的主题提供者提供了儿童主题,请上传并激活它。请注意,在某些情况下,您可能需要再次添加自定义程序设置。因此,请务必仔细检查您的网站。如果某些内容被破坏而您不知道如何修复它,请重新激活您的父主题,一切都会好的。 但为了简单起见,我将直接对父主题进行更改。我们有兴趣更改的文件应位于: /wp-content/themes/your-theme/woocommerce/single-product/add-to-cart/simple.php 如果没有,只需创建它保持相同的文件夹结构。如果您使用子主题,请创建相同的文件夹结构。它看起来像: 您的孩子主题/ woocommerce /单品/添加到购物车/ simple.php 你会在这里看到几行代码。我们感兴趣的代码部分如下所示: <button class=”single_add_to_cart_button button alt” name=”add-to-cart” type=”submit” value=”<?php echo esc_attr( $product->get_id() ); ?>”><!–?php echo esc_html( $product->single_add_to_cart_text() ); ?–></button> 如果您的代码看起来有些不同,请不要担心。它非常好,因为您的主题开发人员添加了一些额外的代码。我们必须确保找到“添加到购物车”按钮的代码。 现在根据我们的任务,我们必须在它旁边添加“立即购买”按钮。只需添加下面的代码即可。 <button id=”buy_now_button” class=”single_add_to_cart_button button alt” name=”add-to-cart” type=”submit” value=”<?php echo esc_attr($product->get_id()); ?>”> <!–?php _e(‘立即购买’,’salong’); ?–> </button> <input id=”is_buy_now” name=”is_buy_now” type=”hidden” value=”0″ /> 注意:使用主题用于“添加到购物车”按钮的相同类。或者只需复制并粘贴相同的“添加到购物车”按钮并进行必要的更改。 这段代码的作用是,它会在“添加到购物车”按钮后添加一个新的“立即购买”按钮。 你注意到两个按钮之间的区别吗? 我们已经提供了新的按钮ID“buy_now_button”,稍后我们将在提交表单时使用。 我们添加了额外的隐藏输入字段,其ID为“is_buy_now”,值为0.这将帮助我们了解用户是否已点击“立即购买”按钮。 我希望一切都适合你。如果您是开发人员,那么对您来说很容易。我正在为非技术人员详细解释它。 现在我们已经有了按钮。如果您保存并访问产品页面,则会看到添加的按钮。现在点击它。 哦,等等。它与“添加到购物车”按钮的工作方式相同。对。我们还没有处理主要逻辑。 现在我们必须为我们的逻辑添加一些javascript才能工作。在主题文件夹中打开functions.php文件。它将在: 你的主题/ functions.php中 或者如果您正在使用子主题,则在您的子主题文件夹中创建它。 在functions.php文件的末尾添加以下代码: <button id=”buy_now_button” class=”single_add_to_cart_button button alt” name=”add-to-cart” type=”submit” value=”<?php echo esc_attr($product->get_id()); ?>”> <!–?php _e(‘立即购买’,’salong’); ?–> </button> <input id=”is_buy_now” name=”is_buy_now” type=”hidden” value=”0″ /> 此代码添加以下javascript代码添加到购物车表单。我们的javascript代码会在“立即购买”按钮上收听点击事件。当有人点击按钮时,我们将id为’is_buy_now’的隐藏输入值设置为1.我们稍后会使用此值来检查是否点击了“立即购买”按钮。 注意:您还可以在主题的主javascript文件中添加此代码。但为了简单起见,我更喜欢在这里添加它。 现在在相同的functions.php文件末尾添加以下php代码: function buy_now_submit_form() { ?> <script> jQuery(document).ready(function(){ // listen if someone clicks ‘Buy Now’ button jQuery(‘#buy_now_button’).click(function(){ // set value to 1 jQuery(‘#is_buy_now’).val(‘1’); //submit the form jQuery(‘form.cart’).submit(); }); }); </script> <!–?php <br ?–> } add_action(‘woocommerce_after_add_to_cart_form’, ‘buy_now_submit_form’); 这是帮助我们将用户重定向到结帐页面的主要代码。默认情况下,重定向网址是购物车页面的网址。 请记住,我们已将ID为’is_buy_now’的隐藏输入设置为值1.此处,我们使用它来区分用户是单击“立即购买”按钮还是常规“添加到购物车”按钮。 因此,如果点击“立即购买”按钮,我们会将重定向网址设置为结帐页面的网址。 而已。我们完了! 保存该文件,一切都应该正常。 综上所述: 我们在“添加到购物车”按钮旁添加了“立即购买”按钮,可将用户直接重定向到结帐页面。 为了区分单击了哪个按钮,我们使用了一个id为’is_buy_now’的隐藏输入元素。 如果点击“立即购买”按钮,我们将此重定向网址更改为结帐页面的网址。 如果在某些情况下你只需要一个重定向到结帐页面的按钮,你只需要在functions.php文件中使用以下代码 add_filter(‘woocommerce_add_to_cart_redirect’, ‘redirect_to_checkout’); function redirect_to_checkout($redirect_url) { if (isset($_REQUEST[‘is_buy_now’]) && $_REQUEST[‘is_buy_now’]) { global $woocommerce; $redirect_url = wc_get_checkout_url(); } return $redirect_url; } 不需要那个javascript代码。另外,不要忘记在simple.php文件中重命名“添加到购物车”按钮(如果需要)。 请注意,此解决方案仅适用于“简单产品”,不适用于“可变产品”或任何其他产品类型。为此,您必须使用我们在simple.php文件中使用的相同逻辑在同一文件夹中的其他文件中(例如,variation-add-to-cart-button.php)

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 在WooCommerce中添加“立即购买”按钮
分享到:
赞(0)
广告位820*80