我正在使用divi和woocommerce在一家在线商店中工作。我正在自定义商店页面(产品档案),并添加了一些PHP代码以包括数量选择器,并在每种产品上添加到购物车按钮。
但是,添加到购物车后,“添加”按钮移至数量选择器上方,大概是因为自从其旁边出现“查看篮”以来,它没有剩余空间。
如何使“添加”按钮保持原位并使“查看篮”出现在其他位置?也许是弹出窗口,还是顶部栏中“购物车”图标上的数字?
下面是我添加到子主题“ functions.php”文件中的代码。最后是用于对齐数量选择器和“添加”按钮的CSS。我使用注释将代码分解,以显示每个部分的位置。
//* Add to cart button *//
function dac_add_cart_button () {
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'dac_add_cart_button' );
//** Add quantity field on the shop page **//
function ace_shop_page_add_quantity_field() {
/** @var WC_Product $product */
$product = wc_get_product( get_the_ID() );
if ( ! $product->is_sold_individually() && 'variable' != $product->get_type() && $product->is_purchasable() ) {
woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
}
}
add_action( 'woocommerce_after_shop_loop_item', 'ace_shop_page_add_quantity_field', 12 );
/**
* Add required JavaScript.
*/
function ace_shop_page_quantity_add_to_cart_handler() {
wc_enqueue_js( '
$(".woocommerce .products").on("click", ".quantity input", function() {
return false;
});
$(".woocommerce .products").on("change input", ".quantity .qty", function() {
var add_to_cart_button = $(this).parents( ".product" ).find(".add_to_cart_button");
// For AJAX add-to-cart actions
add_to_cart_button.data("quantity", $(this).val());
// For non-AJAX add-to-cart actions
add_to_cart_button.attr("href", "?add-to-cart=" + add_to_cart_button.attr("data-product_id") + "&quantity=" + $(this).val());
});
// Trigger on Enter press
$(".woocommerce .products").on("keypress", ".quantity .qty", function(e) {
if ((e.which||e.keyCode) === 13) {
$( this ).parents(".product").find(".add_to_cart_button").trigger("click");
}
});
' );
}
add_action( 'init', 'ace_shop_page_quantity_add_to_cart_handler' );
add_filter( 'add_to_cart_text', 'woo_custom_product_add_to_cart_text' ); // < 2.1
//* ADD TO CART TEXT *//
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_product_add_to_cart_text' ); // 2.1 +
function woo_custom_product_add_to_cart_text() {
return __( 'Add', 'woocommerce' );
}
//** CSS to align quantity and "add" buttons **//
.woocommerce .quantity {
float: left;
margin-top: 20px;
margin-right: -15px;
}