I've been reformatting the Coupon Code box on the Woocommerce checkout page. It was originally huge and at the top of the page, which is terrible design because people will see the big coupon code box and leave your site to go look for a coupon, then never come back.
I have the coupon box where I want and it works just fine if you press enter. The issue is that you can't see the Apply button. It is right below the coupon code box. If you hover over it, the little hand cursor appears. You just can't see it.
How can I get the button to appear to the right of the coupon code box on desktop? It'll get pushed below it on mobile.
You will have to add an item to the cart to see the checkout page: http://198.199.114.131/shop/
Checkout page: http://198.199.114.131/checkout/
Add this style to your theme style.css or any frontend custom css file:
form.checkout_coupon input[type="submit"] {
opacity: 1 !important;
color: #fff !important;
background-color: #dba633 !important;
width: 48% !important;
}
form.checkout_coupon{
width:100% !important;
}
form.checkout_coupon #coupon_code{
width:50% !important;
}
Add this:
input[name="apply_coupon"] {
opacity: 1 !important;
float: left;
background-color: bisque !important;
min-width: 100%;
margin-top: 1em !important;
}
From what I can see, it's the background: none !important; that's not letting you see anything near the coupon box. Remove that piece of code and you can see the button, however, there is no text on the button.
To put the button under the coupon code input box, remove the background: none !important; where you have specified it and then add the following code in your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button {
top: 60px;
}
Currently, top: 3px; is specified.
To display the text, add this code to your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button:before {
content: "Apply Coupon";
}
You can change the Apply Coupon text to whatever text you want to display there.
What I have offered above is a workaround as I do not know what edits you made to the coupon box during your reformatting, but it should solve your problem.
Hope this helps.
Related
I'm trying to center some content. I've inspected the elements and can't figure out how to add the correct changes to custom CSS. I'm using a widget shortcode so can't edit this directly in Elementor text editor.
I'm in WordPress and use Elementor as my page builder.I tried a generic "div" line, however that centered several things on the home page. I'm looking to center Star Rating and the Add to Cart button. Thanks for any advice. New to working with code and feel like I'm barely missing it, but missing it nonetheless.
Featured Products Widget
This is what I used to center the Product Title and Price.
.woocommerce-loop-product__title, h {text-align: center;}
span.price, h
{text-align: center;}
One of the elements when hovered over shows -
div.star-rating::before
I'm not an expert on CSS, but I think you can use this for the Stars.
.star-rating {
margin: 0 auto 0 !important;
}
and you can use this for the Add to Cart button
.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
margin-top: .5em;
margin-bottom: .5em;
white-space: normal;
line-height: 1.3;
margin-left: 4em;
}
This is how it looks for me.
if this help you, don't forget to mark the answer.
There is great documentation on how to change or remove the handheld menu links in WooCommerce available. However, I have noticed that many mobile designs (mweb and apps) are trending towards showing text as well as icons for handheld menus. I want to display the text for the link UNDERNEATH the icon, as well as the icon itself.
It looks like WooCommerce has intentionally hidden the text for the handheld link using CSS:
.storefront-handheld-footer-bar ul li>a {
height: 4.235801032em;
display: block;
position: relative;
text-indent: -9999px;
z-index: 999;
border-right: 1px solid rgba(255, 255, 255, .2)
}
My suspicion is that I should just change the text-indent and the text will show back up. For example, in the instructions provided by WooCommerce to add a new home link to the handheld menu, my thought was that changing text-indent in the CSS would allow me to display both the icon and 'Home'.
function jk_home_link() {
echo '' . __( 'Home' ) . '';
}
But, I can't quite figure out how to "undo" the text-indent so that the text for the link shows as well. Any thoughts?
The text is hidden due to "text-indent: -9999px;" so you can change it as follows.
Here I am additionally added "line-height:" to arrange position of the text.
.storefront-handheld-footer-bar ul li > a {
text-indent: 0px;
line-height: 95px;
}
If you need to adjust position of the icons, you can add following css and make changes on the value.
.storefront-handheld-footer-bar ul li>a::before {
line-height: 2;
}
I have a very little CSS issue that don't know how to resolve.
I have moved the input form into checkout a little in right, but looks like label dont move with form. Now looks like this:
I tried to customize CSS with that rules:
form.checkout #billing_last_name_field, form.checkout
#shipping_last_name_field {
float: none !important;
margin-top: -24px;
margin-left: 40px; // i added this but nothing changed.
}
Any help here?
what to change to make all fields equal?
Link to product here
You could try to add this additional CSS rule targeting the <label> html tag:
form.checkout #billing_last_name_field label,
form.checkout #shipping_last_name_field label{
margin-left: 40px;
}
It should work.
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.