{"id":1071,"date":"2024-07-09T09:18:10","date_gmt":"2024-07-09T09:18:10","guid":{"rendered":"https:\/\/cachitoswp.com\/?p=1071"},"modified":"2025-06-01T18:14:08","modified_gmt":"2025-06-01T18:14:08","slug":"variations-as-products-in-listings-super-trick-woocommerce","status":"publish","type":"post","link":"https:\/\/cachitoswp.com\/en\/variations-as-products-in-listings-super-trick-woocommerce\/","title":{"rendered":"Variations as products in listings: Super WooCommerce trick"},"content":{"rendered":"<p class=\"has-primary-color has-text-color has-link-color has-large-font-size wp-elements-d7e8879054484ce97d1b7e14e798eb81 wp-block-paragraph\">When you design your content strategy based on a product catalog, there is that point of reflection where you must decide how to show or offer a product to your customers, based on the structure of the catalog and compensating accessibility and visibility for these users. of these products on the one hand, and on the other hand, the technical characteristics to work on SEO.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Analyzing the catalogs of very large stores, such as the textile stores of the Inditex group, one day I came across a very cool detail; as an example: A t-shirt, let&#039;s say with the print of the drawing a drop-down menu or thumbnails on the product detail sheet, they were also available as a photo card, independent, in the listing of the &quot;t-shirts&quot; category.<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"345\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1-640x345.webp\" alt=\"example of product variations in listings\" class=\"wp-image-1082\" srcset=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1-640x345.webp 640w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1-1200x648.webp 1200w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1-768x414.webp 768w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1-1536x829.webp 1536w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1-18x10.webp 18w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-1.webp 1640w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"345\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2-640x345.webp\" alt=\"example of product variations in single detail sheet\" class=\"wp-image-1083\" srcset=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2-640x345.webp 640w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2-1200x648.webp 1200w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2-768x414.webp 768w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2-1536x829.webp 1536w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2-18x10.webp 18w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/ejemplo-inditex-variaciones-catalogo-2.webp 1640w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">That is to say, <strong>Its visibility is double,<\/strong> And thus, there are several ways to reach the product that is most attractive to your customers. But there&#039;s even more: with this strategy, the view of the category grows, which <strong>You really make it look like your catalog is extensive.<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">One of the key features of WooCommerce is product variations, which allow you to offer different versions of the same product, such as different sizes, colors or materials.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">From here, I investigated how to implement it in WooCommerce, since I found it super interesting.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wham-vintage.com\/wham-vintage-barcelona-contactar\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2023\/11\/banner.webp\" alt=\"\" class=\"wp-image-1303\"\/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"que-son-las-variaciones-de-un-producto-en-woocommerce\">What are product variations in WooCommerce?<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Product variations in WooCommerce are different versions of the same product that customers can select before making a purchase. For example, if you sell t-shirts, the variations could be different sizes or colors. This gives customers the ability to choose the option that best suits their needs.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"estrategias-para-mostrar-productos-y-variaciones\">Strategies for displaying products and variations<\/h2>\n\n\n<p class=\"wp-block-paragraph\">When displaying products and variations in your online store, it is important to consider strategies that improve the user experience and increase the chances of sales. Here are some useful strategies:<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-c7f233ea wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"wp-block-paragraph\"><strong>\u2611\ufe0f<\/strong> <strong>Highlight the most popular variations: <\/strong>Show variations that are most popular with customers first to increase the chances of a quick sale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2611\ufe0f<\/strong> <strong>Use clear and descriptive images: <\/strong>Make sure the images of each variation are clear and clearly show the differences between them to help customers make informed decisions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2611\ufe0f<\/strong> <strong>Offer search filters: <\/strong>Implement search filters so customers can easily find the variations they are looking for, such as size, color, or price.<\/p>\n\n\n\n<p class=\"has-primary-color has-text-color has-link-color wp-elements-67e8e35d4a0e1eec85aa3899bd4c03c3 wp-block-paragraph\"><strong>\u2611\ufe0f<\/strong> <strong>Show variations in category listings: <\/strong>Use a plugin that allows you to display product variations directly in category listings. This will make your catalog appear more extensive and attractive to customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By following these strategies and taking advantage of WooCommerce functionalities, you will be able to improve the way you display products and variations in your online store, which can result in a <strong>better shopping experience for your customers and increase sales.<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"400\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-267x400.webp\" alt=\"How to get better sales in your WooCommerce with variations\" class=\"wp-image-1074\" style=\"width:324px;height:auto\" srcset=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-267x400.webp 267w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-800x1200.webp 800w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-768x1152.webp 768w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-1024x1536.webp 1024w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-1365x2048.webp 1365w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card-8x12.webp 8w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/close-up-hand-holding-card.webp 1500w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"plugin-variations-as-single-product-de-storeplugin\">StorePlugin \u201cVariations as Single Product\u201d Plugin<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Of course, as always, &quot;there&#039;s a plugin for that&quot;, but don&#039;t think I found it easily. There are others, of course, and of course, Woo official, but this one from <a href=\"https:\/\/storeplugin.net\/\">StorePlugin<\/a> exists in basic version. If we want advanced options, we can always get the PRO version, with support, of course.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"KzW3XK4Maw\"><a href=\"https:\/\/es.wordpress.org\/plugins\/wc-variations-as-single-product\/\">Variations as Single Product \u2013 Display Single Variation for WooCommerce<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abVariations as Single Product \u2013 Display Single Variation for WooCommerce\u00bb \u2014 Plugin Directory\" src=\"https:\/\/es.wordpress.org\/plugins\/wc-variations-as-single-product\/embed\/#?secret=FxNbB5RU3a#?secret=KzW3XK4Maw\" data-secret=\"KzW3XK4Maw\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Plugin to display product variations in listings and categories<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here you have a screenshot of its options screen, and as you can see, the basic version is not bad at all, and includes what is necessary:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"623\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual-1200x623.webp\" alt=\"\" class=\"wp-image-1085\" srcset=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual-1200x623.webp 1200w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual-640x332.webp 640w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual-768x399.webp 768w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual-1536x798.webp 1536w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual-18x9.webp 18w, https:\/\/cachitoswp.com\/wp-content\/uploads\/2024\/07\/plugin-variaciones-productos-woocommerce-como-producto-individual.webp 1610w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"solucion-con-codigo-php-a-medida\">Solution with custom php code<\/h2>\n\n\n<p class=\"wp-block-paragraph\">We can always make our own solution, but <strong>it&#039;s not simple<\/strong>. Variable products and their data structure are a complex content type. To get the variations to be shown in the lists, we will have to modify the <strong>main query<\/strong> to include these. I was thinking about it and there are good ideas and tricks on sites like StackOverflow, but there are several features to take into account that this plugin already solves for you, so... yourselves.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I hope this trick, mini-tutorial or advice has been useful to you, for me finding this &quot;feature&quot; was a great WIN. Do you know of any useful and cool tricks to improve your ecommerce? Share it, don&#039;t keep it to yourself, we are Open Source people! <\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/PoImMjCPa8QaiBWJd0\" width=\"480\" height=\"269\" style=\"\" frameborder=\"0\" class=\"giphy-embed\" allowfullscreen><\/iframe><p><a href=\"https:\/\/giphy.com\/gifs\/reaction-happy-smile-PoImMjCPa8QaiBWJd0\">via GIPHY<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Cuando dise\u00f1as tu estrategia de contenidos en base a un cat\u00e1logo de productos, existe \u00e9se punto de reflexi\u00f3n en donde debes decidir c\u00f3mo mostrar u ofrecer un producto a tus clientes, en base a la estructura del cat\u00e1logo y compensando cara a estos usuarios la accesibilidad y visibilidad de estos productos por una parte, y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1073,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[46,1,7],"tags":[],"class_list":["post-1071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-casos-reales","category-diseno-desarrollo-web-wordpress","category-plugins"],"mb":[],"mfb_rest_fields":["title"],"_links":{"self":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts\/1071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/comments?post=1071"}],"version-history":[{"count":15,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts\/1071\/revisions"}],"predecessor-version":[{"id":1308,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts\/1071\/revisions\/1308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/media\/1073"}],"wp:attachment":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/categories?post=1071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/tags?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}