Tạo product option với giá và hình ảnh trong wooocomerce sử dụng plugin Variation Swatches for WooCommerce

Tạo product option với giá và hình ảnh trong wooocomerce sử dụng plugin Variation Swatches for WooCommerce

Plugin: Variation Swatches for WooCommerce

Download tại: https://wordpress.org/plugins/woo-variation-swatches/

Bước 1 tìm vào folder plugin edit file sau:

webroot/wp-content/plugins/woo-variation-swatches/includes/class-woo-variation-swatches-product-page.php

// Viết thêm function này vào file
public function get_price_variant_product( $data ){
    $price = '';
    $attribute_name = $data[ 'attribute_name' ];
    $product        = $data[ 'product' ];
    $slug        = $data[ 'slug' ];
    $option_name = $data[ 'option_name' ];
    $attribute_value = $slug;

    $available_variations = $this->get_available_variation_images( $product );
            
    $variation = $this->get_variation_by_attribute_name_value( $available_variations, $attribute_name, $attribute_value );
    if ( ! empty( $variation ) ) {
        $price = wp_kses_post( $variation[ 'price_html' ] );
    }
    return $price;
}

// Sửa lại function sau
public function button_attribute( $data, $attribute_type, $variation_data = array() ) {
    
    if ( 'button' === $attribute_type ) {
        $option_name = $data[ 'option_name' ];
        
        $price = $this->get_price_variant_product($data);

        $image = $this->get_image_attribute( $data, 'image', $variation_data );
        $template_format = apply_filters( 'woo_variation_swatches_button_attribute_template', '<span class="variable-item-span variable-item-span-button"><img class="variable-item-image" aria-hidden="true" alt="%s" src="%s" width="%d" height="%d" /><span>%s</span>%s</span>', $data, $attribute_type, $variation_data );
        
        return sprintf( $template_format, esc_attr( $option_name ), esc_url( $image[ 0 ] ), esc_attr( $image[ 1 ] ), esc_attr( $image[ 2 ] ), esc_html( $option_name ), $price );
    }
}

Bước 2: Format CSS

.woo-variation-swatches .variable-items-wrapper .variable-item img {
    width: 30px;
    height: 30px;
}

.variable-item-contents span.amount {
    color: red;
    font-weight: 300;
    font-size: 14px;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
    height: auto !important;
}

.variable-item-span-button .price {
    display: block;
    margin: 0;
    margin-bottom: 5px
}

Và đây là kết quả