Icono ayuda

¿Necesitas ayuda?

Contactar con asesor por WhatsApp

Saltar al contenido

Ariapsa - Diseño de páginas web México

WooCommerce: Insertar shortcode para mostrar productos en una sola pagina y selección

Codigos para woocommerce
Códigos para woocommerce

Instrucciones:

  1. Mostrar 45 productos en una página: Utilizarás un loop personalizado de WooCommerce para limitar el número de productos a 45.
  2. Deshabilitar los enlaces a las páginas de productos individuales: Esto evitará que los usuarios puedan abrir las páginas de detalles de los productos.
  3. Ver imágenes en grande al hacer clic: Puedes usar un lightbox para abrir las imágenes en tamaño grande en la misma página.
  4. Añadir productos a la cesta para cotizar: Modificarás el flujo de compra para que, en lugar de ir al checkout, se muestre un formulario de cotización.

 

Instalar en Code snippets:

 


function custom_wc_product_grid_shortcode($atts) {
ob_start();
// Query Arguments
$args = array(
'post_type' => 'product',
'posts_per_page' => 45,
'orderby' => 'date',
'order' => 'DESC'
);
$loop = new WP_Query($args);
if ($loop->have_posts()) :
echo '<div class="custom-product-grid">';
while ($loop->have_posts()) : $loop->the_post();
global $product;
?>
<div class="custom-product-item">
<a href="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" class="product-lightbox">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
<h2><?php the_title(); ?></h2>
<?php woocommerce_template_loop_add_to_cart(); ?>
</div>
<?php
endwhile;
echo '</div>';
endif;
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('custom_wc_product_grid', 'custom_wc_product_grid_shortcode');
// Enqueue lightbox script
function enqueue_lightbox_script() {
wp_enqueue_script('lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js', array('jquery'), null, true);
wp_enqueue_style('lightbox-css', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_lightbox_script');
// Redirect cart to custom quote page
function custom_redirect_checkout_to_quote() {
global $woocommerce;
$woocommerce->cart->empty_cart(); // Empty the cart if necessary
wp_redirect(home_url('/quote-page')); // Change to your quote page URL
exit;
}
add_action('template_redirect', 'custom_redirect_checkout_to_quote');

 

Añade el shortcode en tu sitio web

  1. Shortcode [custom_wc_product_grid]: Este shortcode crea una cuadrícula de 45 productos. Cada producto se muestra como una miniatura y no tiene un enlace a la página del producto. En lugar de eso, se utiliza un enlace para abrir la imagen en un lightbox.
  2. Lightbox: Se utiliza Lightbox2 para permitir que las imágenes se amplíen en la misma página. El script y el CSS de Lightbox se encolan en el sitio.
  3. Redirección a la página de cotización: En lugar de redirigir al checkout de WooCommerce, se redirige a una página de cotización personalizada una vez que los productos se han añadido al carrito.

Personalización Adicional:

  • Formulario de Cotización: Puedes crear una página personalizada donde colocar un formulario de contacto que recoja la información necesaria para la cotización. Plugins como Contact Form 7 o WPForms pueden ayudarte a implementar este formulario, y puedes vincular los datos de los productos seleccionados al formulario utilizando hooks de WooCommerce.

Uso del Shortcode:

Coloca el shortcode [custom_wc_product_grid] en la página donde quieras mostrar los 45 productos.

 

Ariapsa - Diseño de páginas web México
×

Iniciar Sesión

El registro de usuarios no está permitido.