I'm creating custom buttons (rather than the default select
dropdown) for my WooCommerce
site.
To do this, I've cloned the file for a single-product
page into my theme. This file is called variable.php
and can be found at theme/woocommerce/single-product/add-to-cart/variable.php
.
I've managed to create my custom buttons, but looking to display all the prices and description for each variation
in the button also.
To clarify, I'm after two things:
variation price
variation description
I've tried the methodology mentioned here, but it doesn't do anything for me?
Here is my custom variable.php
(snippet):
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<?php
$html = '';
foreach ( $options as $option ) {
$html .= '<div class="singleProductCard__button">';
$html .= '<input class="singleProductCard__radio" type="radio" id="'. esc_attr( $attribute_name ) .'" class="attached enabled" name="attribute_' . esc_attr( $attribute_name ) . '" data-attribute_name="attribute_' . esc_attr( sanitize_title( $attribute_name ) ) . '" value="' . esc_attr( $option ) . '">';
$html .= '<label for="'. esc_attr( $option ) .'">
<h6 class="singleProductCard__size display--3 mb-0">
'. esc_html( apply_filters( 'woocommerce_variation_option_name', $option, null, $attribute_name, $product ) ) .'
</h6>
</label>';
$html .= '';
$html .= '</div>';
}
echo $html;
wc_dropdown_variation_attribute_options(
array(
'options' => $options,
'attribute' => $attribute_name,
'product' => $product,
)
);
?>
<?php endforeach; ?>
Within each . singleProductCard__button
, under .singleProductCard__size
is where I'm looking to print the price fro each variation alongside the variation descrption.
How do I do this?