添加到购物车功能 woocommerce

WooCommerce 是 WordPress 上使用最广泛的在线商店平台之一。本文将介绍如何为你的 WooCommerce 站点添加“添加到购物车”功能，这是基本的网上商店功能之一。

前提条件

在继续下面的步骤之前，请确保你已经安装并激活了 WooCommerce 插件。

步骤 1: 创建一个新增到购物车的表单

在 WordPress 后台区域中，打开“外观 > 编辑器”，选择你的主题 files/themes//woocommerce/single-product/add-to-cart/simple.php 文件，如果没有这个文件，看一看是否有一个其他名字的同类文件。

在这个文件中，你将看到类似下面的代码：

<?php
  /**
   * Simple product add to cart
   */
  
  if( ! defined( 'ABSPATH' ) ) exit;
  
  global $product;
  
  if ( ! $product->is_purchasable() ) {
    return;
  }
  
  echo wc_get_stock_html( $product );
  
  if ( $product->is_in_stock() ) {
    ?>
    <form class="cart" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
      <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
  
      <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
  
      <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
    </form>
    <?php
  }

我们会在上面代码的基础上进行修改。

将上面的表单代码替换为下面的代码：

<form class="cart" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
  <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

  <?php
  do_action( 'woocommerce_before_add_to_cart_quantity' );

  woocommerce_quantity_input( array(
    'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
    'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
    'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),
  ) );

  do_action( 'woocommerce_after_add_to_cart_quantity' );
  ?>

  <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

  <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>

代码解释:

• 这个函数调用了两个钩子：woocommerce_before_add_to_cart_quantity 和 woocommerce_after_add_to_cart_quantity，用于在输入框前后添加文本或 HTML。
• woocommerce_quantity_input 函数用于显示填写数量的输入框。
• 这个代码中右边的 div 可以用于添加样式或 JavaScript。这里的目的是让商品单价显示完整的价格——如果你将鼠标指向它，它的价格就会变成多个字母和数字。

步骤 2: 定制“添加到购物车”按钮

我们现在将添加到购物车按钮的外观改为红色按钮，并在按钮上面显示一个短代码，让用户知道他们添加的是一个可定制的产品。

将上面的表单代码替换为下面的代码：

<form class="cart" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
  <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

  <?php
  do_action( 'woocommerce_before_add_to_cart_quantity' );

  woocommerce_quantity_input( array(
    'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
    'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
    'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),
  ) );

  do_action( 'woocommerce_after_add_to_cart_quantity' );
  ?>

  <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt">
    <span class="add-to-cart-text">加入购物车</span>
    <span class="price-text">仅 $<?php echo $product->get_price(); ?></span>
  </button>

  <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>

代码解释:

• 添加了一个 span 元素，显示“仅 $xxx”价格，其中 xxx 是产品价格的数值。
• 通过添加一个 add-to-cart-text 类，将添加到购物车按钮的文本更改为“加入购物车”。
• 添加了一个 span 元素，包含可以用于定义该元素的样式或引用画廊的 JavaScript 的类名称。

结论

我们已经成功地向 WooCommerce 添加了一个添加到购物车的表单，以及一个带有定制化按钮的价格和文本。

这个添加到购物车的部件虽然非常简单，但却是一个在线零售商店的基本组成部分，它因为其实用性和易用性而在业界广受追捧。