Podría cargar 10 imágenes, una para cada color de su producto variable… o podría ser un poco más inteligente y simplemente cargar 1 imagen «en blanco» , y luego, cuando el usuario seleccione un color, active un cambio de color de fondo.
Más fácil de codificar que de explicar, así que echemos un vistazo a la captura de pantalla a continuación (la imagen debe ser PNG con fondo transparente ) y el fragmento de PHP. Esto podría ser un ahorro de tiempo, ¡disfrútalo!
-
Cuando se selecciona amarillo -
Cuando no se selecciona ninguna variación
Fragmento de PHP: cambie el color de fondo de la imagen destacada en la variación de color Seleccione @ Página de un solo producto
/** * @snippet Switch Image Background @ WooCommerce Single Variable Product * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @compatible WooCommerce 4.0 * @donate $9 https://businessbloomer.com/bloomer-armada/ */add_action( 'woocommerce_after_variations_form', 'bbloomer_switch_image_background_variable_colors' );function bbloomer_switch_image_background_variable_colors() { wc_enqueue_js( " $('input.variation_id').change(function(){ if('' != $('input.variation_id').val()) { if($('#pa_color').val() =='red'){ $('.woocommerce-product-gallery figure').css('background-color', 'red'); } else if($('#pa_color').val() =='yellow'){ $('.woocommerce-product-gallery figure').css('background-color', 'yellow'); } } else { $('.woocommerce-product-gallery figure').css('background-color', 'transparent'); } }); "); } |