Crear un carousel de productos en oferta en tu tienda WooCommerce puede ser una excelente manera de destacar productos y aumentar las ventas. En este artículo, te mostraremos cómo hacerlo utilizando un snippet de código personalizado en WordPress.
Un carousel de productos en oferta es una excelente manera de mostrar múltiples productos en un espacio limitado y de una manera atractiva. Este snippet de código te permite crear un carousel de productos de WooCommerce que están en oferta, con opciones para personalizar la apariencia y el comportamiento del carousel.
¿Cómo Funciona?
El snippet utiliza el shortcode [mostrar_ofertas] para mostrar un carousel de productos en oferta. Utiliza una consulta WP_Query para obtener los productos en oferta y los muestra en un diseño de carousel. Además, el snippet incluye estilos CSS y JavaScript para hacer que el carousel sea interactivo y atractivo.
Características Principales:
- Cantidad de Productos: Puedes definir cuántos productos quieres mostrar.
- Orden de Productos: Puedes ordenar los productos por fecha, precio, etc.
- Diseño Responsivo: El diseño se adapta a dispositivos móviles, tablets y escritorios.
- Personalización de Colores: Puedes personalizar los colores del fondo, texto, botones, etc.
Casos de Uso del Snippet
- Página de Inicio: Destaca las ofertas en la página de inicio para atraer a los visitantes.
- Páginas de Categoría: Utiliza el carousel en páginas de categoría específicas para mostrar productos en oferta relacionados.
- Páginas de Producto: Muestra productos en oferta relacionados en la página de detalles del producto.
- Publicaciones de Blog: Integra el carousel en tus publicaciones de blog donde hables de productos en oferta.
Snippet carousel de productos
add_shortcode('mostrar_ofertas', 'woocommerce_sale_products');
function woocommerce_sale_products($atts) {
// Atributos por defecto
$atts = shortcode_atts(array(
// cantidad
'per_page' => '12',
'columns_desktop' => '4',
'columns_tablet' => '2',
'columns_mobile' => '1',
'radius' => '8px',
// colores
'fondo_oferta' => 'red',
'color_oferta' => 'white',
'color_precio' => 'green',
'color_titulo' => 'black',
'fondo_boton' => '#e9e6ed',
'color_boton' => 'black',
'fondo_ahorro' => 'white',
'color_ahorro' => 'red',
// orden
'orderby' => 'date',
'order' => 'desc'
), $atts, 'mostrar_ofertas');
$args = array(
'post_type' => 'product',
'posts_per_page' => $atts['per_page'],
'orderby' => $atts['orderby'],
'order' => $atts['order'],
'meta_query' => array(
'relation' => 'AND',
array(
'key' => '_sale_price',
'value' => 0,
'compare' => '>',
'type' => 'NUMERIC'
),
),
);
$loop = new WP_Query($args);
ob_start();
echo '<div id="product-carousel-wrapper" class="product-carousel-wrapper">';
echo '<div id="product-carousel" class="product-carousel">';
echo '<ul class="products">';
if ($loop->have_posts()) {
while ($loop->have_posts()) : $loop->the_post();
global $product;
echo '<li class="product">';
echo '<div class="productocarousel">';
echo '<a href="'.get_the_permalink().'">';
// Mostrar la etiqueta de oferta si el producto está en oferta
if ($product->is_on_sale()) {
echo '<span class="onsale">¡Oferta!</span>';
}
// Mostrar la imagen del producto
echo woocommerce_get_product_thumbnail();
// Mostrar el título del producto
echo '<h2 class="woocommerce-loop-product__title">'.get_the_title().'</h2>';
// Mostrar el precio del producto
echo '<span class="price">'.$product->get_price_html().'</span>';
// Texto "Te ahorras"
if ($product->is_on_sale()) {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
$amount_saved = $regular_price - $sale_price;
echo '<div class="ahorro">Te ahorras: '.wc_price($amount_saved).'</div>';
}
echo '</a>';
// Mostrar el botón "Añadir al carrito"
woocommerce_template_loop_add_to_cart();
echo '</div>';
echo '</li>';
endwhile;
} else {
echo '<li>'.__('No products found').'</li>';
}
echo '</ul>';
echo '</div>';
echo '</div>';
?>
<style>
.productocarousel {
margin: 0 4px;
border: 1px solid #000;
border-radius: <?php echo $atts['radius']; ?>;
overflow: hidden;
}
.productocarousel img {
float: left;
}
.productocarousel span.onsale {
float: left;
margin-bottom: -41px;
position: relative;
background: <?php echo $atts['fondo_oferta']; ?>;
color: <?php echo $atts['color_oferta']; ?>;
padding: 7px 15px;
height: 35px;
border-radius: <?php echo $atts['radius']; ?>;
font-size: 14px;
font-weight: bold;
margin-left: 3px;
margin-top: 3px;
}
.product-carousel-wrapper {
position: relative;
}
.product-carousel {
overflow: hidden;
}
.products {
display: flex;
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
}
.products li.product {
flex: 0 0 calc(100% / <?php echo $atts['columns_mobile']; ?>); /* For mobile */
}
.productocarousel a {
text-decoration: none!important;
text-align: center;
}
.add_to_cart_button {
font-size: 100%;
line-height: 1;
cursor: pointer;
position: relative;
overflow: visible;
padding: 0.618em 1em;
font-weight: 700;
left: auto;
color: <?php echo $atts['color_boton']; ?>;
background-color: <?php echo $atts['fondo_boton']; ?>;
border: 0;
background-image: none;
box-shadow: none;
text-shadow: none;
margin: 0 auto;
display: table;
margin-top: 15px;
margin-bottom: 20px;
min-width: 80%;
border-radius: <?php echo $atts['radius']; ?>;
}
span.price {
display: block;
color:<?php echo $atts['color_precio']; ?>;
}
span.price ins {
text-decoration: none;
font-weight: bold;
}
.productocarousel a h2{
color:<?php echo $atts['color_titulo']; ?>;
font-size: 18px;
display: block;
margin-top: 20px;
padding-top: 20px;
clear: both;
height: 60px;
}
.ahorro {
color: <?php echo $atts['color_ahorro']; ?>;
background: <?php echo $atts['fondo_ahorro']; ?>;
font-weight: bold;
font-size: 14px;
border-radius: <?php echo $atts['radius']; ?>;
}
.products li.product img {
width: 100%;
}
@media (min-width: 768px) {
.products li.product {
flex: 0 0 calc(100% / <?php echo $atts['columns_tablet']; ?>); /* For tablet */
}
}
@media (min-width: 1024px) {
.products li.product {
flex: 0 0 calc(100% / <?php echo $atts['columns_desktop']; ?>); /* For desktop */
}
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #333;
border: 1px solid #000;
cursor: pointer;
z-index: 2;
width: 45px;
height: 45px;
padding: 0px;
color: #fff;
font-weight: bold;
font-size: 20px;
border-radius: <?php echo $atts['radius']; ?>;
}
button:first-child {
left: 0;
}
button:last-child {
right: 0;
}
@media (max-width:767px){
.productocarousel {
margin: 0 35px;
}
}
a.added_to_cart.wc-forward {
text-align: center;
display: block;
margin-top: -10px;
margin-bottom: 15px;
font-weight: bold;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('product-carousel-wrapper');
const carousel = document.getElementById('product-carousel');
const nextBtn = document.createElement('button');
const prevBtn = document.createElement('button');
nextBtn.innerHTML = '>';
prevBtn.innerHTML = '<';
nextBtn.addEventListener('click', function() {
carousel.scrollBy({left: carousel.offsetWidth, behavior: 'smooth'});
});
prevBtn.addEventListener('click', function() {
carousel.scrollBy({left: -carousel.offsetWidth, behavior: 'smooth'});
});
wrapper.appendChild(prevBtn);
wrapper.appendChild(nextBtn);
});
</script>
<?php
wp_reset_postdata();
return ob_get_clean();
}
Personalización
El snippet viene con varias opciones de personalización que puedes modificar según tus necesidades:
per_page: Número de productos a mostrar.columns_desktop,columns_tablet,columns_mobile: Número de columnas para diferentes dispositivos.fondo_oferta,color_oferta,color_precio, etc.: Opciones para personalizar los colores.
Conclusión
Crear un carousel de productos en oferta en tu tienda WooCommerce es una excelente manera de mejorar la experiencia del usuario y aumentar las ventas. Con este snippet, puedes hacerlo de manera fácil y personalizable. ¿Tienes alguna pregunta o comentario? ¡Déjanos saber!
Espero que este artículo te sea de ayuda para implementar un carousel de productos en oferta en tu tienda WooCommerce. ¡Buena suerte!
