{"id":25523,"date":"2018-03-27T00:00:00","date_gmt":"2018-03-26T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=25523"},"modified":"2021-08-23T16:47:49","modified_gmt":"2021-08-23T11:17:49","slug":"how-to-display-woocommerce-sidebar-on-top-on-mobile","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-display-woocommerce-sidebar-on-top-on-mobile\/","title":{"rendered":"\u00bfC\u00f3mo mostrar la barra lateral de WooCommerce en la parte superior para dispositivos m\u00f3viles?"},"content":{"rendered":"<p>Al activar&nbsp;<a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/sidebar-free\/\">Barra lateral WooCommerce&nbsp;<\/a>en una tienda, carrito, p\u00e1gina de pago y\/o p\u00e1gina de producto \u00fanico, la barra lateral se muestra en un contenedor secundario.<\/p>\n\n\n\n<p><strong>\u00bfQu\u00e9 es un contenedor secundario?<\/strong><\/p>\n\n\n\n<p>B\u00e1sicamente, un contenedor es donde aparece el contenido y la informaci\u00f3n principal. En general, si se omiten la cabecera y el pie de p\u00e1gina, lo que queda es el contenedor. El \u00e1rea de contenido y la barra lateral son partes del contenedor. El \u00e1rea de contenido se denomina t\u00e9cnicamente contenedor primario, mientras que la barra lateral es el contenedor secundario.<\/p>\n\n\n\n<p>En los dispositivos m\u00f3viles, el contenedor primario se apila sobre un contenedor secundario. As\u00ed, el contenedor secundario se muestra debajo del contenedor primario.<\/p>\n\n\n\n<p>Si desea mostrar la barra lateral por encima del contenedor principal en el m\u00f3vil, tendr\u00e1 que utilizar c\u00f3digo CSS personalizado. A continuaci\u00f3n se menciona el c\u00f3digo CSS necesario para ambas barras laterales.<\/p>\n\n\n\n<p><strong>Para la barra lateral izquierda<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@media (max-width: 768px){\n  .ast-left-sidebar #content&gt;.ast-container{.ast-container\n      -webkit-flex-wrap: wrap;\n      -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n      -webkit-box-orient: horizontal;\n      -webkit-box-direction: normal;\n      -webkit-flex-direction: row;\n      -moz-box-orient: horizontal;\n      -moz-box-direction: normal;\n      -ms-flex-direction: row;\n      flex-direction: row;\n  }\n}\n\n<\/pre>\n\n\n\n<p><strong>Para la barra lateral derecha<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@media (max-width: 768px){\n    .ast-right-sidebar #content&gt;.ast-container{\n        -js-display: flex;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: -moz-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-flex-wrap: wrap;\n        -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n    }\n    .ast-right-sidebar #content&gt;.ast-container&gt;#primary {\n        orden: 2;\n    }\n    .ast-right-sidebar #content&gt;.ast-container&gt;#secondary {\n        order: 1;\n    }\n}\n<\/pre>\n\n\n\n<p><strong>\u00bfD\u00f3nde puedo colocar este c\u00f3digo CSS personalizado?<\/strong><\/p>\n\n\n\n<p>Puede insertar este CSS de dos formas<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>En el Personalizador: Desde el backend de WordPress navega a Apariencia &gt; Personalizar &gt; CSS adicional y a\u00f1ade el c\u00f3digo en el \u00e1rea de CSS personalizado. (Recomendado) <strong>O<\/strong><\/li><li>A trav\u00e9s del style.css del tema hijo: Edite el archivo <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-edit-style-css-in-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">style.css del tema hijo<\/a> y a\u00f1ada un CSS obligatorio.<\/li><\/ol>\n\n\n\n<p><strong>Otros enlaces \u00fatiles<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/install-astra-child-theme\/\">\u00bfC\u00f3mo instalar Astra Child Theme?<\/a><\/li><li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-edit-style-css-in-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00bfC\u00f3mo editar style.css en un tema hijo?\u00a0<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>Cuando activas la barra lateral de WooCommerce en una tienda, carrito, p\u00e1gina de pago y\/o p\u00e1gina de producto \u00fanico, la barra lateral se muestra en un contenedor secundario. \u00bfQu\u00e9 es un contenedor secundario? B\u00e1sicamente, un contenedor es donde aparece el contenido y la informaci\u00f3n principal. En general, omita la parte de la cabecera y el pie de p\u00e1gina del sitio web y lo que queda es el contenedor. El \u00e1rea de contenido [...]<\/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":[108],"docs_tag":[],"class_list":{"0":"post-25523","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-general"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["108"],"_wp_old_slug":[""],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["0"],"wpil_links_inbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["4"],"wpil_links_outbound_external_count_data":["a:4:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:38:\"https:\/\/wpastra.com\/docs\/sidebar-free\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:25:\"WooCommerce sidebar&nbsp;\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:28:\"child theme's&nbsp;style.css\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:51:\"https:\/\/wpastra.com\/docs\/install-astra-child-theme\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:33:\"How to Install Astra Child Theme?\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:45:\"How to edit style.css in a child theme?&nbsp;\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T06:37:19+00:00"],"_edit_lock":["1702889693:98"],"_edit_last":["70"],"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":["30"],"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 Display WooCommerce Sidebar on Top for Mobile Devices?"],"_ht_kb_post_views_count":["9"],"_ht_kb_usefulness":["0"],"_ht_article_order_108":["25523"],"wp_last_modified_info":["August 23, 2021 @ 4:47 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["6714"],"helpful":["22"],"unhelpful":["9"],"redirects":["10"],"_yoast_wpseo_estimated-reading-time-minutes":["2"],"rank_math_primary_docs_category":["108"],"rank_math_title":["How to Display WooCommerce Sidebar on Top for Mobile Devices?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1150"],"rank_math_internal_links_processed":["1"],"_trp_automatically_translated_slug_es_ES":["como-mostrar-la-barra-lateral-de-woocommerce-en-la-parte-superior-en-el-movil"],"_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:17:\"core\/preformatted\";i:2;s:9:\"core\/list\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776859538\";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":"When you enable&nbsp;WooCommerce sidebar&nbsp;on a shop, cart, checkout page and\/or single product page, the sidebar is displayed in a&nbsp;secondary container. What is a secondary container? Basically, a&nbsp;container is where the main content and information appears. In general, omit the header and footer part of the website and what remains is the container. The content area&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/25523"}],"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=25523"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/25523\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=25523"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=25523"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=25523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}