{"id":28307,"date":"2018-06-26T00:00:00","date_gmt":"2018-06-25T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=28307"},"modified":"2023-05-25T15:35:50","modified_gmt":"2023-05-25T10:05:50","slug":"off-canvas-sidebar-for-woocommerce-shop-page","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/off-canvas-sidebar-for-woocommerce-shop-page\/","title":{"rendered":"Off-Canvas Sidebar para WooCommerce Shop Page"},"content":{"rendered":"<p>Se trata de una funci\u00f3n premium disponible con el <strong>Complemento Astra Pro<\/strong>&nbsp;plugin. Para utilizar estas funciones Pro, debe disponer de la licencia&nbsp;<a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Tema Astra<\/a>&nbsp;junto con el Addon Astra Pro instalado en su sitio web.<\/p>\n\n\n\n<p>Puede gestionar la barra lateral utilizando el m\u00f3dulo WooCommerce disponible con Astra Pro. Consulte&nbsp;<a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/woocommerce-module-overview\/\">documento<\/a>Para empezar, el m\u00f3dulo WooCommerce.<\/p>\n\n\n\n<p><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/woocommerce-module-overview\/\">Complemento WooCommerce<\/a> proporciona una opci\u00f3n de barra lateral fuera del lienzo para la pantalla <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/shop-woocommerce\/\">Tienda<\/a> p\u00e1gina. Los ajustes se encuentran en<strong> Apariencia &gt; Personalizar &gt; WooCommerce &gt; Cat\u00e1logo de Productos<\/strong>.<\/p>\n\n\n\n<p><strong>La barra lateral fuera del lienzo <\/strong>forma parte de la estrategia de navegaci\u00f3n. La barra lateral est\u00e1 inicialmente desplazada fuera de la pantalla y tambi\u00e9n fuera de la vista. Para que aparezca la barra lateral hay que activar la opci\u00f3n de filtro desde la opci\u00f3n Barra de herramientas. Al hacer clic en el activador, aparece Off-Canvas Sidebar. Esta opci\u00f3n funciona muy bien tambi\u00e9n con todos los dispositivos responsive.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-toolbar-structure-1.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-toolbar-structure-1-1024x471.png\" alt=\"Enabling-filter-from-toolbar-structure\" class=\"wp-image-137335\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-toolbar-structure-1-1024x471.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-toolbar-structure-1-300x138.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-toolbar-structure-1-768x353.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-toolbar-structure-1.png 1351w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Dado que se trata de una barra lateral, es necesario configurar la barra lateral utilizando varios widgets de WordPress. O incluso puedes a\u00f1adir widgets de terceros.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activar la barra lateral fuera del lienzo <\/h2>\n\n\n\n<p>Hay 3 maneras de mostrar el activador Off-Canvas Sidebar:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Enlace<\/strong><\/h3>\n\n\n\n<p>Cuando elige el bot\u00f3n de filtro de la tienda como enlace, el filtro aparece en el men\u00fa de tres l\u00edneas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-1.png\"><img decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-1-1024x483.png\" alt=\"Astra-Shop-filters0-link\" class=\"wp-image-137336\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-1-1024x483.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-1-300x142.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-1-768x363.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-1.png 1345w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Bot\u00f3n<\/strong><\/h3>\n\n\n\n<p>Cuando se elige el filtro de la tienda como bot\u00f3n, aparece como tal. Como se mencion\u00f3 anteriormente, el color del tema por defecto y el estilo se aplica al bot\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-buttons-1.png\"><img decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-buttons-1-1024x474.png\" alt=\"Astra-Shop-filters-buttons\" class=\"wp-image-137337\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-buttons-1-1024x474.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-buttons-1-300x139.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-buttons-1-768x356.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-buttons-1.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Clase personalizada<\/strong><\/h3>\n\n\n\n<p>Esta funcionalidad personalizada le ayuda a establecer\/colocar el activador de Off-Canvas Sidebar en cualquier lugar que desee de todo el sitio web. El activador de Off-Canvas Sidebar puede colocarse en el encabezado, encima del encabezado, en el pie de p\u00e1gina o en cualquier otro lugar seg\u00fan sus necesidades.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-custom-class-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"431\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-custom-class-1-1024x431.png\" alt=\"Astra-shop-filters-custom-class\" class=\"wp-image-137338\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-custom-class-1-1024x431.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-custom-class-1-300x126.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-custom-class-1-768x324.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/11\/Astra-shop-filters-custom-class-1.png 1341w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Aqu\u00ed, debe especificar el nombre de la clase de la barra lateral fuera del lienzo en el campo Clase personalizada. Puede ser cualquier nombre que desee. Ahora puede utilizar este nombre de clase en cualquier lugar de su sitio.<\/p>\n\n\n\n<p>Por ejemplo, puedes a\u00f1adir un nombre de clase de barra lateral fuera del lienzo que hayas especificado a cualquier bot\u00f3n de tu sitio web. puedes a\u00f1adir un nombre de clase en la configuraci\u00f3n de botones de la pesta\u00f1a avanzada. De esta manera, el bot\u00f3n se convertir\u00e1 en un disparador para su barra lateral fuera del lienzo.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-class.png\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"519\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-class.png\" alt=\"WooCommerce Filter Class\" class=\"wp-image-25118\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-class.png 686w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-class-300x227.png 300w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Nota:<\/strong> Custom Class activar\u00e1 la barra lateral fuera del lienzo s\u00f3lo en la p\u00e1gina de la tienda. No se activar\u00e1 en ninguna otra p\u00e1gina. Por ejemplo, si el bot\u00f3n con una clase personalizada se a\u00f1ade a la cabecera. Entonces, al hacer clic en el bot\u00f3n, se activar\u00e1 la barra lateral fuera del lienzo s\u00f3lo en la p\u00e1gina de la tienda y no en otras p\u00e1ginas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A\u00f1ade widgets a tu barra lateral fuera del lienzo <\/h2>\n\n\n\n<p>Despu\u00e9s de activar la opci\u00f3n, la barra lateral fuera del lienzo no se activar\u00e1 hasta que a\u00f1adas widgets (filtros) en ella.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget-1024x458.png\" alt=\"\" class=\"wp-image-144834\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget-1024x458.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget-300x134.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget-768x343.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget-1536x686.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/widget.png 1893w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Para a\u00f1adir widgets, vaya a <strong>Apariencia &gt; Widgets &gt; Filtros de tienda.&nbsp;<\/strong>Basta con arrastrar y soltar los widgets desde la opci\u00f3n Widgets disponibles.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/04\/ast-3-3-pro-woo-off-canvas-add-widgets.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"715\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/04\/ast-3-3-pro-woo-off-canvas-add-widgets.png\" alt=\"Astra Pro - WooCommerce Off-canvas Filter - Add Widgets, Astra 3.0+\" class=\"wp-image-86669\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/04\/ast-3-3-pro-woo-off-canvas-add-widgets.png 1366w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/04\/ast-3-3-pro-woo-off-canvas-add-widgets-300x157.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/04\/ast-3-3-pro-woo-off-canvas-add-widgets-1024x536.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/04\/ast-3-3-pro-woo-off-canvas-add-widgets-768x402.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/a><\/figure>\n\n\n\n<p>Una vez a\u00f1adidos los widgets, puedes gestionar otras personalizaciones desde el personalizador.<br><\/p>","protected":false},"excerpt":{"rendered":"<p>Esta es una funci\u00f3n Premium disponible con el complemento Astra Pro. Para utilizar estas caracter\u00edsticas Pro, es necesario tener el tema Astra junto con el Astra Pro Addon instalado en su sitio web. Puede gestionar la barra lateral utilizando el m\u00f3dulo WooCommerce disponible con Astra Pro. Por favor, consulte el documento, para empezar, el m\u00f3dulo WooCommerce. WooCommerce Addon proporciona un Off-Canvas [...]<\/p>","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[148],"docs_tag":[],"class_list":{"0":"post-28307","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-woo"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["148"],"_wp_old_slug":[""],"_wp_page_template":["default"],"_edit_lock":["1685009212:86"],"_edit_last":["86"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["60"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["1"],"wpil_links_inbound_internal_count_data":["a:1:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:70:\"https:\/\/wpastra.com\/docs\/off-canvas-sidebar-for-woocommerce-shop-page\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"25007\";s:5:\"title\";s:16:\"Shop WooCommerce\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:7213:\"<!-- wp:paragraph -->\n<p>You can style the shop page where all your products are listed. This can be your main shop page or the product archive page.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>This is a premium feature available with\u00a0<strong>Astra Pro Addon<\/strong>\u00a0plugin. To use these Pro features, you need to have the\u00a0<a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a>\u00a0along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have seen the&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/woocommerce-integration-overview\/\">WooCommerce integration<\/a>&nbsp;with Free Astra theme.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>WooCommerce Pro Addon gives powerful and exclusive styling options for your WooCommerce store. You can make your store all the more stylish with minimal efforts and simple customization settings. Refer this doc for <a href=\"https:\/\/wpastra.com\/docs\/shop-woocommerce-2\/\">Structuring Shop WooCommerce<\/a> page.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Note&nbsp;<\/strong>\u2013 Make sure you have WooCommerce plugin activated.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the settings under <strong>Appearance &gt; Customize &gt; Layout &gt; WooCommerce &gt; Product Catalog<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":40060,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-locate-woocommerce-section.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-locate-woocommerce-section.png\" alt=\"\" class=\"wp-image-40060\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Choose Product Layout<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Astra has two layout options for your Shop page:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Grid View<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Where you can display your shop in a grid style, where the product image is displayed at the top.<br>Product-related information like price, sale price, category, etc is displayed below the image.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":40061,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-grid-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-grid-layout.png\" alt=\"\" class=\"wp-image-40061\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>List View<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Where the image and product related information is displayed side by side.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":40062,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-list-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-list-layout.png\" alt=\"\" class=\"wp-image-40062\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Shop Columns<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You can choose the number of columns to be displayed for your products on the shop page, in Grid View and List View.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Grid View<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"id\":40063,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-grid-columns.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-grid-columns.png\" alt=\"\" class=\"wp-image-40063\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>List View<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You have control to choose the number of columns on your responsive devices:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":40064,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-list-columns.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-list-columns.png\" alt=\"\" class=\"wp-image-40064\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Products Per Page<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Just like the Blog posts on the archive page, you have control to decide the number of products on the main shop page.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":40065} -->\n<figure class=\"wp-block-image\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-products-per-page-1024x532.png\" alt=\"\" class=\"wp-image-40065\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Shop Pagination<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Number<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The number option restricts the number of products on an individual page.<br>The remaining undisplayed products are divided into further pages<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Shop Pagination Style<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You can change the change this style to Circle or Square<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":40075,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-pagination-style.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-pagination-style.png\" alt=\"\" class=\"wp-image-40075\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Infinite Scroll<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>This option on the product page stands for the unlimited display of products.<br>The page gets extended as far as you keep adding the products on the product archive page with an infinite scroll.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Event to Trigger Infinite Loading<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>Scroll<\/h5>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Keeps you scrolling the page.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>Click<\/h5>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The Scroll may elongate the page and the viewer may lose interest after scrolling at a certain level. To avoid this choose an option of Click where the Load More button appears.<br>This button appears after a certain number of products are displayed in rows.<br>You can change the button text as per your needs.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>More Documents -&nbsp;<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><a href=\"https:\/\/wpastra.com\/docs\/quick-view-for-woocommerce-products\/\">Quick View for WooCommerce Products<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/off-canvas-sidebar-for-woocommerce-shop-page\/\">Off Canvas Sidebar for WooCommerce Shop Page<\/a><\/li><\/ul>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:42:\"https:\/\/wpastra.com\/docs\/shop-woocommerce\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=25007\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=25007\";}}s:6:\"anchor\";s:44:\"Off Canvas Sidebar for WooCommerce Shop Page\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["10"],"wpil_links_outbound_external_count_data":["a:10:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:35:\"https:\/\/wordpress.org\/themes\/astra\/\";s:4:\"host\";s:13:\"wordpress.org\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:11:\"Astra theme\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:53:\"https:\/\/wpastra.com\/docs\/woocommerce-module-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:8:\"document\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:53:\"https:\/\/wpastra.com\/docs\/woocommerce-module-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:17:\"WooCommerce Addon\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:42:\"https:\/\/wpastra.com\/docs\/shop-woocommerce\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:4:\"Shop\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:76:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-woo-off-canvas-link.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:119:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-woo-off-canvas-link.png\" alt=\"\" class=\"wp-image-39248\"\/>\";s:15:\"added_by_plugin\";b:0;}i:5;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:78:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-woo-off-canvas-button.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:121:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-woo-off-canvas-button.png\" alt=\"\" class=\"wp-image-39250\"\/>\";s:15:\"added_by_plugin\";b:0;}i:6;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:75:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-class.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:118:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-class.png\" alt=\"\" class=\"wp-image-25118\"\/>\";s:15:\"added_by_plugin\";b:0;}i:7;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:77:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-woo-off-canvas-class.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:120:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-woo-off-canvas-class.png\" alt=\"\" class=\"wp-image-39252\"\/>\";s:15:\"added_by_plugin\";b:0;}i:8;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:77:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-sidebar-widget.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:120:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-sidebar-widget.png\" alt=\"\" class=\"wp-image-25122\"\/>\";s:15:\"added_by_plugin\";b:0;}i:9;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:78:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-settings.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:121:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/woocommerce-filter-settings.png\" alt=\"\" class=\"wp-image-25121\"\/>\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T13:46:24+00:00"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"_yoast_wpseo_title":["How to Add off Canvas Sidebar for WooCommerce Shop Page"],"wp_last_modified_info":["May 25, 2023 @ 3:35 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_yoast_wpseo_estimated-reading-time-minutes":["3"],"_ht_kb_post_views_count":["17"],"_ht_kb_usefulness":["0"],"_ht_article_order_148":["28307"],"views":["10368"],"helpful":["7"],"unhelpful":["24"],"redirects":["32"],"rank_math_primary_docs_category":["148"],"rank_math_title":["How to Add off Canvas Sidebar for WooCommerce Shop Page"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1080"],"rank_math_seo_score":["25"],"rank_math_internal_links_processed":["1"],"_wplmi_last_modified":["2023-05-25 15:35:50"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"d147b456882cb33c11dff158954f3206\";s:6:\"images\";a:1:{i:0;i:137335;}}"],"pfd_related_docs":[""],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["off-canvas-sidebar-for-woocommerce-shop-page"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:5:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/image\";i:2;s:12:\"core\/heading\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777883889\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Anjali","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/anjalic\/"},"uagb_comment_info":0,"uagb_excerpt":"This is a premium feature available with&nbsp;the Astra Pro Addon&nbsp;plugin. To use these Pro features, you need to have the&nbsp;Astra theme&nbsp;along with the Astra Pro Addon installed on your website. You can manage the sidebar using the WooCommerce module available with Astra Pro. Please refer&nbsp;document, to begin with, the WooCommerce module. WooCommerce Addon provides&nbsp;an Off-Canvas&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/28307"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=28307"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/28307\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=28307"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=28307"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=28307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}