View cart button is displayed in the main menu above the magnifying glass

Hi @cortinashd!

Please try this CSS:

.dgwt-wcas-search-wrapp .woocommerce-message {
  position: fixed;
  bottom: 0;
  top: 0px;
  right: 0;
  width: 100vw;
  max-width: 600px;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  gap: 10px;
  flex-direction: row-reverse;
  padding-right: 20px;
}

.dgwt-wcas-search-wrapp .woocommerce-message::before {
  top: 50%;
  margin-top: -0.5em;
}

.dgwt-wcas-search-wrapp .woocommerce-message .button {
	height: 45px;
	line-height: 20px;
	padding: 10px 20px;
	margin-left: auto;
}

@media(max-width: 992px) {
	.dgwt-wcas-search-wrapp .woocommerce-message {
    top: auto;
    bottom: 0;
    width: 100vw;
    align-items: center;
    height: auto;
    flex-direction: row;
    justify-content: center;
    margin: 0;
	}
	
	.dgwt-wcas-search-wrapp .woocommerce-message .button {
		margin-left: 0;
	}
}

Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, look at?this video.

Regards,
Kris

Thanks Kris for the prompt response, I applied the CSS in my child theme, and if it was modified, is there a way for the notice not to be shown above the magnifying glass and for it to be below the main menu, without hiding the magnifying glass, that is, The notice appears automatically when I add the product to the cart but it has nothing to do with the search magnifying glass?

I attached images
https://ibb.co/2YMS2fN

to be shown here:
https://ibb.co/NpBw211

website:
https://www.decorjade.com

I remain attentive to your comments.

Greetings

• This reply was modified 6 months ago by cortinashd. Reason: add website

Hi @cortinashd!

We need to remove woocommerce class from FiboSearch search wrap and add it to the main content wrap to achieve that. Here’s the code that will do the trick:

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		function removeWooCommerceClassFromFiboSearch() {
			var fiboSearchBars = document.getElementsByClassName("dgwt-wcas-search-wrapp");
			for (let i = 0; i < fiboSearchBars.length; i++) {
				fiboSearchBars[i].classList.remove("woocommerce");
			}
		}

		document.addEventListener("DOMContentLoaded", function(event) {
			removeWooCommerceClassFromFiboSearch();
		});

		document.addEventListener('DOMContentLoaded', function() {
			var primaryElement = document.getElementById('primary');
			if (primaryElement) {
				primaryElement.classList.add('woocommerce');
			}
		}); 
	</script>
<?php }, 9999 );

You have two ways to add this code to your theme:

1. Open the?functions.php?in your child theme and add the code at the end.
2. ?or install the?Code Snippets?plugin and apply this code as a snippet.

Regards,
Kris

Thank you Kris for your prompt response, the code is perfect, however the product stopped being seen, I would like the product to continue being seen and not be deleted so that the client continues adding more items.

infinite thanks

I attach image and video

https://ca.plik.ovh/file/91i2f0uFerxGPbYx/gsLYXhiHRuoCRzNu/2024-05-31_18h29_19.jpg

https://ca.plik.ovh/file/91i2f0uFerxGPbYx/q0Ptd3H7eazYf0tr/2024-05-31_18h07_04.mp4

Hi @cortinashd!

OK, please change the code to this. It will create a new div for the Woocommerce alert to prevent overriding #primary content.

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		function removeWooCommerceClassFromFiboSearch() {
			var fiboSearchBars = document.getElementsByClassName("dgwt-wcas-search-wrapp");
			for (let i = 0; i < fiboSearchBars.length; i++) {
				fiboSearchBars[i].classList.remove("woocommerce");
			}
		}

		document.addEventListener("DOMContentLoaded", function(event) {
			removeWooCommerceClassFromFiboSearch();
		});

		document.addEventListener('DOMContentLoaded', function() {
			var primaryElement = document.getElementById('primary');
			if (primaryElement) {
				var wooDiv = document.createElement('div');
				wooDiv.classList.add('woocommerce');
				primaryElement.parentNode.insertBefore(wooDiv, primaryElement);
			}
		}); 
	</script>
<?php }, 9999 );

Regards,
Kris

Hi Kris, on the mobile it looks good but on the PC it overlaps the breadcrumbs, I attach the images. Thank you.

https://ca.plik.ovh/file/S76eilSRSocboy43/u8yA8dasaIC8Spgi/2024-06-03_08h27_30.jpg

https://ca.plik.ovh/file/S76eilSRSocboy43/d62jVZbqrHSKrvuq/2024-06-03_08h26_20.jpg

https://ca.plik.ovh/file/S76eilSRSocboy43/Nub1enyEzvqnVGYO/2024-06-03_08h31_58.mp4

Hi, @cortinashd!

Please use the below CSS to fix that:

.site-content .ast-container {
	flex-direction: column;
}

.ast-container .woocommerce  + .primary {
	margin-top: 0 !important;
}

Regards,
Kris

Fabulous! Thank you 1000 Kris for your support, I close the issue as resolved. Just one last question, how can I develop WordPress plugins, which I have to study, maybe you have a study guide?

Hi Kris, I just realized that the sidebar has moved in the product category, it no longer appears on the right side, after making the last modification, also when the product is deleted it appears there, I sent the video, these are the codes I have added so far:

css:

/* The View Cart button is shown in the main menu above the magnifying glass, this is a solution */

.dgwt-wcas-search-wrapp .woocommerce-message {
position: fixed;
bottom: 0;
top: 0px;
right: 0;
width: 100vw;
max-width: 600px;
align-items: center;
justify-content: flex-end;
height: 60px;
gap: 10px;
flex-direction: row-reverse;
padding-right: 20px;
}

.dgwt-wcas-search-wrapp .woocommerce-message::before {
top: 50%;
margin-top: -0.5em;
}

.dgwt-wcas-search-wrapp .woocommerce-message .button {
height: 45px;
line-height: 20px;
padding: 10px 20px;
margin-left: self;
}

@media(max-width: 992px) {
.dgwt-wcas-search-wrapp .woocommerce-message {
top: self;
bottom: 0;
width: 100vw;
align-items: center;
height: self;
flex-direction: row;
justify-content: center;
margin: 0;
}

.dgwt-wcas-search-wrapp .woocommerce-message .button {
margin-left: 0;
}
}

/* WooCommerce view cart setting recommended by Kris */
.site-content .ast-container {
flex-direction: column;
}

.ast-container .woocommerce + .primary {
margin-top: 0 !important;
}

Functions.php

// Show view cart after the cebezera

add_action( 'wp_footer', function() { ?>


<?php }, 9999 );

video:

https://ca.plik.ovh/file/Ci2sNbWPQGkNgZ0n/w1nPJB7kuO6As9VG/2024-06-05_12h42_39.mp4

images: 
https://ca.plik.ovh/file/Ci2sNbWPQGkNgZ0n/RJIaoWaDeYpV9dRq/2024-06-05_14h08_00.jpg

Hi, @cortinashd.

Please remove my previous CSS code:

.site-content .ast-container {
	flex-direction: column;
}

.ast-container .woocommerce  + .primary {
	margin-top: 0 !important;
}

and replace this code in your theme:

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		function removeWooCommerceClassFromFiboSearch() {
			var fiboSearchBars = document.getElementsByClassName("dgwt-wcas-search-wrapp");
			for (let i = 0; i < fiboSearchBars.length; i++) {
				fiboSearchBars[i].classList.remove("woocommerce");
			}
		}

		document.addEventListener("DOMContentLoaded", function(event) {
			removeWooCommerceClassFromFiboSearch();
		});

		document.addEventListener('DOMContentLoaded', function() {
			var primaryElement = document.getElementById('primary');
			if (primaryElement) {
				var wooDiv = document.createElement('div');
				wooDiv.classList.add('woocommerce');
				primaryElement.parentNode.insertBefore(wooDiv, primaryElement);
			}
		}); 
	</script>
<?php }, 9999 );

with this:

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		function removeWooCommerceClassFromFiboSearch() {
			var fiboSearchBars = document.getElementsByClassName("dgwt-wcas-search-wrapp");
			for (let i = 0; i < fiboSearchBars.length; i++) {
				fiboSearchBars[i].classList.remove("woocommerce");
			}
		}

		document.addEventListener("DOMContentLoaded", function(event) {
			removeWooCommerceClassFromFiboSearch();
		});

		document.addEventListener('DOMContentLoaded', function() {
			var primaryElement = document.getElementById('content');
			if (primaryElement) {
				var wooDiv = document.createElement('div');
				wooDiv.classList.add('woocommerce', 'ast-container');
				primaryElement.parentNode.insertBefore(wooDiv, primaryElement);
			}
		}); 
	</script>
<?php }, 9999 );

Let me know if that works.

Regards,
Kris

Hello Kris, after modifying the code this happens:

1- The discount label is overlaid on the main menu

I attach the link

https://ca.plik.ovh/file/Ci2sNbWPQGkNgZ0n/hq9iG54ZkUa1XYBf/2024-06-08_01h23_23.jpg

• This reply was modified 5 months, 3 weeks ago by cortinashd.

Hi, @cortinashd!

There are two ways to fix that:

1. Increase z-index value in site header: .site-header { z-index: 100; }
2. Find .site-header class in your theme and remove position: relative;

Both methods should fix the issue, but you must test which one won’t cause more problems. The first one in my opinion.

Regards,
Kris

• This reply was modified 5 months, 2 weeks ago by Kris.