I want to change 'Optional' label in Woocommerce Checkout. My site is in another language, however for some reason Woocommerce shows this word in English. I want to change it to 'Neprivaloma'
Didn't find 'code way' of doing this, but possible to do with CSS hack:
span.optional {
font-size: 0 !important;
}
span.optional:after {
content: 'YOUR TEXT';
font-size: 13px;
}
With that we hide default label by setting its font-size to 0 and show our own by giving it font-size back.
Related
On my woocommerce site we added a prefix for regular price, called RRP. (as you can see on the attached picture)
I would like to appear an info icon before "RRP" text, and would like to add a tooltip, if someone hover on the icon, a unique text would appear. This would be a short description, what does RRP mean.
We are using css to appear price prefix:
This is an example how we would like to see: https://www.emag.hu/samsung-galaxy-a22-mobiltelefon-kartyafuggetlen-dual-sim-128gb-lte-fekete-sm-a225fzkgeue/pd/DF5FNHMBM/?ref=prod_CMP-167737_12195_125894
del .amount::before {
margin-right: 5px;
font-weight: 400;
font-size: 13px;
}
del .amount::before {
content: 'RRP:';
}
Do you have any idea how can i do this?
photo
I would change the color of the menu items in wordpress. In this site https://www.modacapellishop.it/ I have four voices in the menu (Brand, Prodotti, Modacapelli Choice, Outlet) and I need to change the color of Modacapelli Choice (grey to blue). I added this code on the CSS file:
/* Change color menu Modacapelli Choice */
#menu-item-427 a {
color: #2976ce;
}
It work but just on desktop. On the mobile version in menu navigation sidebar the menu item "Modacapelli Choice" doesn't change the color.
How can I solve that?
Since this is an extremely specific case you can either .menu-item-427 > a { color: red!important; } or do .nav>li.menu-item-427>a { color: red; }
I would recommend the latter.
However both are not great, since it is bound to the ID. I would recommend making an ACF field for the page or the menu-element, then checking if it exists, and creating an inline style or adding a class if it is true.
The user can then also change the color of other elements he wishes to change without contacting you about it.
You would then add a class like this to your menu markup for example.
.is-highlighted-element {
color: red;
}
In Mobile view doesn't have #menu-item-427 this id. so replace with .menu-item-427
Try this css it's works
.menu-item-427 a {
color: #2976ce;
}
I’m using the Shop Konado theme.
I'm trying to disable the hover effect of the products and leave the "buy" button always visible in the mobile version: https://prnt.sc/t2ul5l (print from my store). Another example: https://prnt.sc/luen4q
I tried to use the following code in the additional Wordpress css:
html .shop-item:hover .shop-item-image:after {
background: none;
}
But it did not work.
This is my store:
https://www.arteverdeagro.com.br/loja/product-category/todos-os-produtos-in-natura/
thanks for the help
This should work.
.box-hover{
opacity: 1 !important;
margin-top:10px !important;
}
I am using "Display the default discounted price and percentage on Woocommerce products" answer code (for simple products), and I would like the displayed output font to be bold, red and with a large size, for this line:
sprintf( __('<p class="saved-sale">Save: %s <em>(%s)</em></p>', 'woocommerce' ), $saving_price, $saving_percentage );
How this can be done? Any help is appreciated.
You would target the paragraph element with the class .saved-sale.
In your CSS you could write something like this:
p.saved-sale {
font-weight: bold;
color: FF0000;
font-size: larger;
}
Check out font-size on the MDN Web Docs to learn how to increase or decrease font sizes.
The Gutenberg editor comes with an embedded stylesheet. Here's a snippet from that stylesheet:
...
.editor-styles-wrapper {
font-family: "Noto Serif", serif;
font-size: 16px;
line-height: 1.8;
color: #191e23;
}
.editor-styles-wrapper p {
font-size: 16px;
line-height: 1.8;
}
...
I've enqueued my own editor stylesheet using the following:
add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}
Since I have my own editor stylehseet, I'd like to get rid of the default one. A search on this topic yields lots of results for removing default block styling on the front end, but I'm referring to the editor styling on the back end. Thanks for your help!
I drilled down into how it was being injected and found a way to nuke it out via the block_editor_settings filter. There is a styles key with an array that contains the css. The only iffy thing about this for me is that I'm assuming the shape of the array will always be the same, I should be doing some type of check here.
add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
unset($settings['styles'][0]);
return $settings;
}
My solution was a workaround to automatically override any styles within the .editor-styles-wrapper. Using LESS:
editor-style.css
.editor-styles-wrapper {
#import "style.less";
}
I would still love to disable that embedded stylesheet though, if anyone knows how to do that.