With WooCommerce, I would like to hide or remove FEATURED checkbox from product pages settings in the Backend (Admin), see the screenshot below.
I have tried with CSS display:none but it does't work.
Any help will be appreciated
Thanks
(source: imgh.us)
Yes it's possible with a custom function hooked in admin_head wordpress hook, that will inject in the admin head some CSS rules. Here we target the product post types pages.
Here is that code:
add_action('admin_head', 'hiding_and_set_product_settings');
function hiding_and_set_product_settings(){
echo '<style>
.post-type-product #catalog-visibility-select p:nth-of-type(2),
.post-type-product #catalog-visibility-select label[for=_featured],
.post-type-product #catalog-visibility-select input[type=checkbox] { visibility: hidden !important; display none !important;}
</style>';
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works.
See this screenshot of my test raw server:
Related
I'm using ACF to create custom fields in my custom post types. It all works fine but the Ui of the default editor is not adding any margin to the bottom of the screen and the ACF field is not accessible. Please check the screenshot to understand better.
Is there a way to add spacing at the bottom or a workaround to make the field accessible?
You could add a margin between both by injecting a bit of css via a the admin_head action hook in your function.php file.
<?php
add_action( 'admin_head', 'admin_script' );
function admin_script() {
echo '
<style media="screen">
div.postbox-container {
margin-bottom: 25px;
}
</style>';
};
?>
In the admin page when you press "add new order" there is General Details, Billing Details and Shipping Details:
I would love to hide some these with CSS. I've tried all day but have been able to achieve this unsuccessfully.
I just want to keep the Billing details visible. Is that possible?
This can be done simply with the following hooked function and some specific CSS rules:
add_action('admin_head', 'my_admin_head');
function my_admin_head() {
?>
<style>
.post-new-php.post-type-shop_order #postbox-container-2 .order_data_column_container > .order_data_column:first-child,
.post-new-php.post-type-shop_order #postbox-container-2 .order_data_column_container > .order_data_column:last-child {
display:none !important;
}
</style>
<?php
}
Code goes in function.php file of your active child theme (or active theme).
Tested and works…
I have a client that uses woocommerce with Wordpress. When viewing an order, they wish for any order with notes to be highlighted with a background colour.
When I try and do this, I only seem to be able to target multiple fields within the page, highlighting them all. This is because 'customer notes provided' does not have a class I can target to make the change using a third party plugin that lets you tweak WP backend pages etc.
Without hacking php files, is there a way to just target this field, or add a custom class to it so I can format it?
Use this code:
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
#order_data .order_data_column:nth-child(3) .address p:nth-child(2) strong {
background-color: aqua; /*<-- replace it with your color code*/
}
</style>';
}
Code goes in functions.php file of your active child theme (or theme). Or also in any plugin php files.
Code is tested and works.
Hope this helps!
I am having trouble overriding the default styling that comes with WooCommerce. Specifically, I am trying to hide certain fields that display on my checkout page (see screenshot of the code). I mocked up my page on Code Pen and my css is working fine, so I am not sure why it doesn't work on my styles.css of my child theme. Any help is appreciated!
.variation li div:first-child {
display: none; }
https://codepen.io/jagorski/pen/oZBYrd
Clear the browser cache & try this:
.variation-JobListing:first-child {
display: none !important;
}
I'm looking for some help in WooCommerce. I would like to hide the mini cart and topbar when there are no items in the cart (as it won't be used that often).
Below is the HTML output.
Is there some kind of "WooCommerce Hook" that needs to be added in functions.php?
Sorry, I don't even know what PHP files to look in to post any code snippets for this particular area, if they are required.
Please let me know if they are.
Thanks.
Your header.php file located in your main theme is displaying that Mini-cart. (Is better to use a child theme and to copy that file from the parent theme to the child theme, avoiding loose the customizations when updating main theme).
Editing that header.php file, you will have to use a simple condition around the code that is displaying Mini-cart, this way:
// If cart is not empty display the mini-cart
if(!WC()->cart->is_empty()){
// Here goes the code that display mini cart in your header
}
This should work, but if ajax is enabled for add-to-cart, the mini-cart will be displayed only moving to another page or refreshing the actual page.
ALTERNATIVE: THE EASY WAY (HIDDING WITH CSS)
Another alternative, should be to inject a CSS rule in html head, when cart is empty this way:
add_action('wp_head', 'hook_css', 99999);
function hook_css() {
// If cart is empty hide the mini-cart
if(WC()->cart->is_empty())
echo '<style type="text/css">#top > #cart{display:none !important;}</style>';
}
This code goes on function.php file of your active child theme (or theme) or in any plugin file.
The code works.and if you want to hide all the top bar (and the mini-cart at the same time), replace the css rule by (just removing > #cart):
#top{display:none !important;}
Fixed it thanks to your suggestion LoicTheAztec, played around with the code a little! Thanks.
<!-- TOPBAR -->
<?php if (sizeof(WC()->cart->get_cart()) != 0) { get_template_part( 'topbar' ); }?>
<!-- END TOPBAR -->
Here is a simple workaround which works for
the new mini cart "Gutenberg" block
and modern browsers supporting :has
(and the quantity is the first string in the aria-label)
.wc-block-mini-cart:has(.wc-block-mini-cart__button[aria-label^="0 "]) {
display: none;
}