How to change “add to cart” in WooCommerce?

坚强是说给别人听的谎言 提交于 2020-05-14 14:15:14

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!