How to change "add to cart" in WooCommerce? - php

Question

I wanna use <ul> <li> instead of <select> <option>
I enter this code in function.php but doesn't work:
function wc_dropdown_variation_attribute_options( $args = array() ) {
.
.
.
$html = '<div class="tt-wrapper"><div class="tt-title-options">اندازه:</div><ul id="' . esc_attr( $id ) . '" class="tt-options-swatch options-large ' . esc_attr( $class ) . '" name="' . esc_attr( $name ) . '" data-attribute_name="attribute_' . esc_attr( sanitize_title( $attribute ) ) . '" data-show_option_none="' . ( $show_option_none ? 'yes' : 'no' ) . '">';
if ( ! empty( $options ) ) {
if ( $product && taxonomy_exists( $attribute ) ) {
// Get terms if this is a taxonomy - ordered. We need the names too.
$terms = wc_get_product_terms(
$product->get_id(),
$attribute,
array(
'fields' => 'all',
)
);
foreach ( $terms as $term ) {
if ( in_array( $term->slug, $options, true ) ) {
$html .= '<li><a href="#" value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $args['selected'] ), $term->slug, false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $term->name, $term, $attribute, $product ) ) . '</a></li>';
}
}
} else {
foreach ( $options as $option ) {
// This handles < 2.4.0 bw compatibility where text attributes were not sanitized.
$selected = sanitize_title( $args['selected'] ) === $args['selected'] ? selected( $args['selected'], sanitize_title( $option ), false ) : selected( $args['selected'], $option, false );
$html .= '<li><a href="#" value="' . esc_attr( $option ) . '" ' . $selected . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option, null, $attribute, $product ) ) . '</a></li>';
}
}
}
$html .= '</ul></div></div>';
echo apply_filters( 'woocommerce_dropdown_variation_attribute_options_html', $html, $args ); // WPCS: XSS ok.
}
How can I change woocommerce HTML codes to my own HTML codes?
this is more detail for post this question

Answer 1

To override the default themes of WooCommerce you better have a "woocommerce" sub-directory on your theme folder.
for example:
/wp-content/themes/mytheme/woocommerce/
There you can specify exactly which of the themes you want to change.
Learn more about it here.
Also, you can hook to actions and filters. In the example you sent, you can hook to this filter: woocommerce_dropdown_variation_attribute_options_html to change it's final output.
Learn more about it here and here.