php - 将 Woocommerce variable.php 从表更改为 div
问题描述
我目前正在我的主题中自定义（或尝试）yourtheme/woocommerce/single-product/add-to-cart/variable.php 但是即使我已经尝试过，我似乎也无法摆脱 woocommerce 中的表格代码并将其替换为 div 和下拉列表。我希望它看起来像下面的部分：
<!-- Product Section -->
<section>
<div class="container my-5 px-5 pt-4 bg-light">
<div class="row no-gutters">
<div class="col-md-5">
<img src="<?php bloginfo('template_directory'); ?>/assets/images/best-seller.jpg" class="img-fluid w-75 m-auto d-block"
alt="Best Seller">
</div>
<div class="col-md-7 pr-md-5">
<h1 class="main-heading my-4">BLACK MATTE JAR</h1>
<form>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputSize">Size</label>
<select id="inputSize" class="form-control">
<option selected>Big - 14 oz</option>
<option>Small - 10 oz</option>
</select>
</div>
<div class="form-group col-md-4 offset-md-1">
<label for="inputQuantity">Quantity</label>
<select id="inputQuantity" class="form-control">
<option selected>1 unit</option>
<option>2 unit</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputFragrance">Fragrance</label>
<select id="inputFragrance" class="form-control">
<option selected><img src="<?php bloginfo('template_directory'); ?>/assets/images/icon-1.png" class="d-inline w-25">Peace
of mind</option>
<option>Refreshing</option>
</select>
</div>
<div class="form-group col-md-4 offset-md-1 mt-auto">
<div class="product-price pb-3">
<h5>Price <span class="float-right">25$</span></h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-lg px-5 my-4">ADD TO CART</button>
</form>
</div>
</div>
</div>
</section>
因此，当我开始这一切时，我设法使用下面的代码获得了所有产品变体，但是我不知道如何管理 woocommerce 挂钩以及如何在用户更改下拉列表时获得适当的变体价格（所以下面的代码根本没有使用钩子）
`<div class="col-md-7 pr-md-5">
<h1 class="main-heading my-4"><?php the_title(); ?></h1>
<?php
/*** ADD TO CART DYNAMIC */
$attribute_keys = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );
do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputSize">Size</label>
<select id="inputSize" class="form-control">
<?php
$product = wc_get_product( get_the_id() );
$size = $product->get_attribute('size');
$size_array = print_r ($size , TRUE);
$size_text = explode ('|', $size_array);
$aux_size = 0;
foreach ($size_text as $s_txt){
if ($aux ==0) {
?><option selected><?php echo $s_txt ?></option>
<?php
} else {
?><option><?php echo $s_txt ?></option>
<?php
}
}
?>
</select>
</div>
<div class="form-group col-md-4 offset-md-1">
<label for="inputQuantity">Quantity</label>
<select id="inputQuantity" class="form-control">
<option selected>1 Unit</option>
<option>2 Units</option>
<option>3 Units</option>
<option>4 Units</option>
<option>5 Units</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputFragrance">Fragrance</label>
<select id="inputFragrance" class="form-control">
<?php
$fragrance = $product->get_attribute('fragrance');
$fragrance_array = print_r ($fragrance , TRUE);
$fragrance_text = explode ('|', $fragrance_array);
$aux_size = 0;
foreach ($fragrance_text as $f_txt){
if ($aux ==0) {
?><option selected><?php echo $f_txt ?></option>
<?php
} else {
?><option><?php echo $f_txt ?></option>
<?php
}
}
?>
</select>
</div>
<div class="form-group col-md-4 offset-md-1 mt-auto">
<div class="product-price pb-3">
<h5>Price <span class="float-right">25$</span></h5>
</div>
</div>
</div>
<button onclick="Add_to_cart(<?php $product?>)" type="submit" class="btn btn-lg px-5 my-4">ADD TO CART</button>`
然后我发现了 variable.php，所以下面是我无法做到的： 1 - 似乎无法提供与以前相同的外观（请参阅这篇文章中显示的第一个代码。2 - 当我替换下面的代码和第一次迭代中的第一个 div 给了我 $attribute_name = null。
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
<td class="value">
3 - 我似乎无法在用户更改产品属性时获取变化价格。
你们有没有人设法做到这一点？如果是这样，你能分享你的代码吗？我真的希望这个线程更干净，更清晰。我已经添加到下面代码中的位置。
<div class="col-md-7 pr-md-5">
<h1 class="main-heading my-4"><?php the_title(); ?></h1>
<?php
/*** ADD TO CART DYNAMIC */
$available_variations = $product->get_available_variations();
$attributes = $product->get_variation_attributes();
$attribute_keys = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );
do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
<?php do_action( 'woocommerce_before_variations_form' );
?>
<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
<p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
<td class="value">
<?php
wc_dropdown_variation_attribute_options(
array(
'options' => $options,
'attribute' => $attribute_name,
'product' => $product,
)
);
?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="single_variation_wrap">
<?php
/**
* Hook: woocommerce_before_single_variation.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
*
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* Hook: woocommerce_after_single_variation.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php endif; ?>
我已经尝试更改它几天但没有任何成功我大部分时间都返回到原始代码这就是我在这里发表第一篇文章的原因，因为我无法将价格添加到此代码中，也无法按照我的 html 进行转换设计。
很抱歉这个简单的问题，但我无法在网上找到之前已经做到这一点的人。
解决方案
我已经设法用以下代码做到了：
<?php endforeach; ?>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="">Quantity</label>
<div class="single_variation_wrap">
<?php
/**
* Hook: woocommerce_before_single_variation.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
*
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* Hook: woocommerce_after_single_variation.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
</div>
<div class="form-group col-md-6 mt-6">
<div class="product-price pb-3">
<h5 >Price <?php echo $product->get_price_html(); ?></h5>
</div>
</div>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
我已经以一种简单的方式将 tds 转换为 div，这仍然可以被 woocommerce 识别。此外，我设法获取了代码中显示的价格。
现在我只有一个问题，即如果没有选择，则强制用户留在我的自定义页面中。
希望有人可以支持我
推荐阅读
- ssl - 如何重现成功的 openssl_verify
- javascript - javascript生成的CSS类不应用样式
- node.js - 使用 mongodb atlas 的跨域请求阻止了 Node Js
- excel - 尝试将列中的单元格与数组进行比较，如果不匹配则隐藏单元格的行
- garrys-mod - Sending object through http.Post() not working
- javascript - 域感知反应路由器
- html - HTML解析器到csv，输出文件夹中没有结果
- html - Bootstrap 4如何使用css通过清除按钮颜色更改来更改输入搜索
- selenium - Selenium, Robot framework 使用这个我们必须点击下面描述的按钮
- python - 用于在 .txt 文件中添加逗号并将 ASCII 值组织成行的自动化脚本？