How to change “add to cart” in WooCommerce?

问题

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

回答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.

回答2:

You can use the following code to rewrite the html output

function woocommerce_dropdown_variation_attribute_options_html_callback( $html, $args ) {
    $options = $args['options']; 
    $product = $args['product']; 
    $attribute = $args['attribute']; 
    $name = $args['name'] ? $args['name'] : 'attribute_' . sanitize_title( $attribute ); 
    $id = $args['id'] ? $args['id'] : sanitize_title( $attribute ); 
    $class = $args['class'];
    $show_option_none = $args['show_option_none'] ? true : false; 
    $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __( 'Choose an option', 'woocommerce' ); // We'll do our best to hide the placeholder, but we'll need to show something when resetting options. 

    if ( empty( $options ) && ! empty( $product ) && ! empty( $attribute ) ) { 
        $attributes = $product->get_variation_attributes();
        $options = $attributes[ $attribute ]; 
    }

    $html = '<ul id="' . esc_attr( $id ) . '" class="' . 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' ) . '">'; 
    $html .= '<li value="">' . esc_html( $show_option_none_text ) . '</li>'; 

    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 ) ) { 
                  $html .= '<li value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $args['selected'] ), $term->slug, false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $term->name ) ) . '</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 value="' . esc_attr( $option ) . '" ' . $selected . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</li>'; 
            } 
        } 
    }
    $html .= '</ul>';
    return $html;
}
add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'woocommerce_dropdown_variation_attribute_options_html_callback', 10, 2 );

来源：https://stackoverflow.com/questions/59595641/how-to-change-add-to-cart-in-woocommerce