Changing the location of shop side bar

  • Hi
    On my shop page, I would like to do 2 changes
    1. I am struggling to change the shop sidebar (PRODUCT CATEGORIES) to the left side of the shop page.
    Is it possible to change the location for mobile users to be below the menu and before the printed items?
    2. Is it possible to change the location of “CHOOSE YOUR CURRENCY” widget to an upper place of the page ( next to the “Cart” icon or the inside the menu )

    Can you please assist me with the CSS code to implement the changes, please?

    • This topic was modified 2 years, 7 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey @sagibinder,

    1. To change the shop sidebar you can use following CSS:

    div#primary {
    float: right;
}

    Here’s how you can add CSS to your website:

    https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    Here is the code to change the location of the sidebar as per your requirements:

    @media (max-width: 768px){
.container .row?{
    display: flex !important;?
    flex-direction: column !important;
}

#primary {
    order: 2 !important;
}

#secondary {
	order: 1 !important;
}
}

    2. To bring the Currency widget to top, add the following CSS code to your website:

    section#currency_sel_widget-0 {
    position: absolute !important;
    top: 85px !important;
}

    Hope this helps!

    Thread Starter sagibinder

    (@sagibinder)

    Hello
    Thanks for your help.
    I edit the CSS file through the theme customization and nothing is working from the 3 solutions above, can you please assist

    Attached is Additional CSS code – go to the end of the code this is the part I added your code

    .site-header .header-t {
    padding: 42px 0 21px;
}

.oneRowForm>div input:not([type="submit"]),
.oneRowForm textarea {
	border: none;
	border-bottom: 1px solid #545454 !important;
	background: none !important;
	outline: none;
	border-radius: 0;
	margin-bottom: 10px;
	width: 90%;
	max-width: 400px;
	text-indent: 0;
	font-weight: 400;
}

.oneRowForm textarea {
	resize: none;
	height: 100px;
	padding-right: 7px;
	transition: height .4s;
}

.oneRowForm textarea:active,
.oneRowForm textarea:focus {
	height: 100px;
}

.oneRowForm input[type="submit"] {
	background: #000;
	width: 100px;
	height: 30px;
	line-height: 30px;
	border-radius: 0;
	outline: none;
	-webkit-transition: all .3s;
	transition: all .3s;
	text-indent: 0;
	text-shadow: none;
	color: white;
	padding: 0;
}

.oneRowForm .my_submit_button:hover,
.oneRowForm .my_submit_button:focus,
.oneRowForm .my_submit_button:active {
	outline: none;
	background: #545454 !important;
}

.oneRowForm .ajax-loader {
	position: absolute;
	left: auto;
	right: auto;
}

body.rtl .wpcf7-form input,
body.rtl .wpcf7-form textarea {
	max-width: 100%;
	direction: rtl;
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
	text-align: center;
}

body.rtl .wpcf7-form {
	text-align: center;
}

.site-info,
.page-title {
	display: none
}

.main-navigation ul {
	font-size: 16px;
	font-weight: 400;
}

.main-navigation ul ul {
	font-size: 14px;
	font-weight: 400;
}

.rtl .search-field {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

/* .site-content  {
    margin-top: -110px;
} */

.woocommerce .site-content {
	margin-top: -60px;
}

.text-logo .custom-logo-link {
	width: 150px;
}

/* HOME page override START */

.home .site-content {
	margin-top: 0;
	overflow-x: hidden;
	padding: 0;
}

.home .entry-content {
	margin: 0;
}

.home .container {
	padding: 0;
/* 	max-width: 100%; */
}

.home .hentry {
	margin: 0;
}

.home footer {
	display: none !important;
}

/* HOME page override END */

.tiled-gallery .gallery-row {
	margin-bottom: 10px;
	width: 111% !important;
}

.gallery {
	margin: -10px;
}

.gallery-item {
	padding: 10px;
}

.rtl .blossomthemes-email-newsletter-wrapper {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.rtl .widget-title {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.rtl .subscribe-fname-6079 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.rtl .subscribe-email-6079 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.rtl .subscribe-submit-6079 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
	background: #888888;
}

.subscribe-submit-6078 {
	background: #888888;
}

.rtl .menu-item-627 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.rtl .menu-item-627-he {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.subscribe-fname-popup-5972 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.subscribe-email-popup-5972 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.subscribe-submit-popup-5972 {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.lbten-response-popup-5972 {
	text-align: right
}

.rtl .blossomthemes-email-newsletter-wrapper id="popup-5972" {
	font-size: 16px;
	font-weight: 400;
	font-family: Open Sans Hebrew;
}

.woocommerce {
	color: black;
}

a {
	color: #7A7A7A;
}

a:hover {
	color: #7A7A7A;
}

a:visited {
	color: #7A7A7A;
}

.woocommerce div.product .product_title {
	font-size: 28px !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: #000000;
	font-size: 20px;
	line-height: 1em;
	font-weight: 400;
}

.woocommerce div.product .entry-summary .price {
	font-size: 18px;
	margin: 0 0 20px;
}

.woocommerce div.product .entry-summary .variations_form table.variations tr td select {
	color: #000000;
}

.woocommerce div.product form.cart .button {
	color: #000000;
}

.woocommerce .woocommerce-message .button:hover {
	background: #000000;
	color: #ffffff;
}

.woocommerce-checkout .woocommerce .woocommerce-info {
	background-color: #ececec;
}

.site-header .tools .cart {
	color: #ececec;
}

footer .widget .widget-title:before,
footer .widget .widget-title:after {
	width: 0px;
}

.woocommerce-cart .cart-collaterals .cross-sells ul.products li {
	width: 45%;
}

.woocommerce-cart .cart-collaterals .woocommerce-loop-product__title {
	font-size: 20px!important;
}

@media all and (max-width:455px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 10px 10px;
	}
}

@media all and (max-width: 500px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce-page .woocommerce-result-count {
		width: 50%;
		float: right;
		text-align: right;
	}
}

@media only screen and (max-width: 1024px) {
	.main-navigation ul li a {
		background-image: linear-gradient(180deg, transparent 93%, #000000 0) !important;
	}
	.rtl .main-navigation ul li button {
		right: unset !important;
	}
	.rtl #toggle-button {
		float: right !important;
		font-size: 18px;
		font-weight: 400;
		font-family: Open Sans Hebrew;
	}
	.rtl .main-navigation.open {
		right: 0 !important;
	}
	.rtl .site-header .nav-holder .tools {
		float: left !important;
	}
}
@media only screen and (max-width: 667px) {
.woocommerce-page div#content-wrap {
    display: flex;
    flex-direction: column;
}
div#primary {
    float: left;
}
@media (max-width: 768px){
.container .row {
    display: flex !important;?
    flex-direction: column !important;
}

#primary {
    order: 2 !important;
}

#secondary {
	order: 1 !important;
}
}
section#currency_sel_widget-0 {
    position: absolute !important;
    top: 85px !important;
}
    Thread Starter sagibinder

    (@sagibinder)

    Any help @praveenrai , please?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing the location of shop side bar’ is closed to new replies.