✅Código de WooCommerce para Productos Variables

Hoy te traigo un código que vas a poder insertar en tu WordPress y con el cual vas a poder dar la opción al usuario de comprar un producto variable desde la página principal de todos los productos de tu tienda sin tener que meterse dentro del producto.

Página principal de productos variables en Woocommerce sin el código:

codigo productos variables woocommerce, productos compuestos woocommerce

Compras desde Tienda

Para ello vamos a utilizar el plugin Code Snippets o cualquier otro plugin que permita insertar código PHP en tu WordPress y vamos a pegar el siguiente código:

/** Variaciones de productos en la página principal de la tienda **/

function change_loop_add_to_cart() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'template_loop_add_to_cart', 10 );
}

add_action( 'init', 'change_loop_add_to_cart', 10 );

function template_loop_add_to_cart() {
global $product;

if ( ! $product->is_type( 'variable' ) ) {
woocommerce_template_loop_add_to_cart();
return;
}

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
add_action( 'woocommerce_single_variation', 'loop_variation_add_to_cart_button', 20 );

woocommerce_template_single_add_to_cart();
}

function loop_variation_add_to_cart_button() {
global $product;

?>
<div class="woocommerce-variation-add-to-cart variations_button">
<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>
<?php
}
Lenguaje del código: PHP (php)

Una vez instalado y activado el plugin code snippets lo único que tenemos que hacer es copiar el código, crear un nuevo snippets y pegarlo.

Hacemos clic en Guardar y activar el snippet.

productos variables woocommerce comprar desde portada, opciones de producto woocommerce. Woocommerce productos combinados

Bien si ahora vamos a la tienda y recargamos la página veremos que se han agregado las opciones para elegir el producto que queramos desde ahí mismo, sin la necesidad de entrar dentro del producto.

Veremos algo parecido a esto:

agregar variaciones de producto emn la página principal de la tienda woocommerce wordpress, productos compuestos woocommerce

Redirección a Checkout

Ahora para que cuando el cliente compre un producto lo lleve directamente a la página de finalizar compra y así saltarse el paso del carrito vamos a copiar este código y lo vamos a pegar en un nuevo snippet que vamos a crear.

add_filter (‘add_to_cart_redirect’, ‘redirect_to_checkout’);

function redirect_to_checkout() {
global $woocommerce;
$checkout_url = $woocommerce->cart->get_checkout_url();
return $checkout_url;
}
Lenguaje del código: PHP (php)

Hacemos click en Guardar y activar snippet y listo.

Ahora el cliente podrá comprar productos variables desde la página principal de tu tienda de manera muy rápida y una vez seleccionado el producto lo llevará directamente a la página de check out y así nos ahorraremos unos cuántos pasos de por medio.

Nos vemos en el siguiente tutorial. Un saludo. 

4.6/5 - (10 votos)
Compartir Artículo

Un comentario

  1. Fran Salas Master WP 1 año atrás

    Deja tus opiniones o dudas en los comentarios.

¿Tienes una duda o sugerencia sobre este artículo?

Puedes dejar un comentario de forma anónima, sin necesidad de registrarte ni proporcionar ningún dato personal. Tu mensaje se publicará como “Usuario Anónimo No Premium”, un perfil que agrupa a todos los visitantes no registrados.

Importante: para evitar el spam automático, todos los comentarios anónimos deben comenzar con el símbolo #. Ejemplo: # Tengo una duda sobre los shortcodes personalizados...

Este espacio está destinado exclusivamente a preguntas concretas, dudas o sugerencias relacionadas con el contenido del artículo. Por respeto a los demás lectores, no se publicarán temas sin relación.

Privacidad y normas:
  • No tienes que agregar tu nombre, correo ni ningún otro dato identificativo.
  • No se permiten enlaces en comentarios anónimos.
  • No se permiten símbolos especiales como < o > (menor y mayor que), ya que se consideran intentos de insertar código y serán bloqueados.
  • Todos los comentarios anónimos pasan por revisión antes de ser publicados y solo se aprobarán si aportan valor al contenido del artículo.
¿Quieres comentar con tu nombre y que tu mensaje se publique al instante? Inicia sesión o regístrate.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

0%