hand-picked products block not showing my products in correct format.

Hello Bruce!

Thanks for reaching out and trying our blocks, we’d love for you to be able to transition from the old shortcode paradigm, to the new blocks without much headaches.

First of all, I’d like to thank you for providing a nice example page, that’s really helpful! Regarding the Sale Badge, how do you apply the modification to the original shortcode? Are you using a 3rd party plugin? Or are you applying some custom code snippet that hooks into a filter or a CSS modification?

It would really help to know so that I can try to provide an alternative to that.
Best regards,

Lucio

Hi Lucio

I’m using the Storefront theme (with a child theme)

I’m using custom code that I have added to my child theme functions.php for the Sales Badge.(I got the code from, the internet)

The button colours (I use white text on Black buttons) are set in Customizer.

regards, Bruce

Hi @brucemacg

I’m using custom code that I have added to my child theme functions.php for the Sales Badge.(I got the code from, the internet)

Thanks for sharing with us that you have used a custom code to alter the default behavior of the plugins.

Kindly be informed that these forums are meant for general support with the core functionality of WooCommerce itself. Since custom coding is outside our scope of support, I am leaving this thread open for a bit to see if anyone can chime in to help you out. You could also paste the code snippet you used.

For questions related to development and custom coding, your best bet is to ask on any of these channels for support. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

• WooCommerce Developer Resources Portal
• WooCommerce Advanced Facebook group
• WooCommerce Community Forum
• WooCommerce Developer Slack Channel
• Hire a WooCommerce Expert

Hope this helps!

Hi

My custom code works fine on my entire site. This includes products added by shortcode, products in woocommerce, products added to a blog article, bundled products added via another plugin, etc, etc. However, just not on sale products added with hand-pick products?

But, lets ignore the sales badge. Why is the formatting / Colour changes of my Add to Cart buttons (that I set in Customiser) not reflecting on Products added with hand-picked products?????

regards

Hello @brucemacg,

But, lets ignore the sales badge. Why is the formatting / Colour changes of my Add to Cart buttons (that I set in Customiser) not reflecting on Products added with hand-picked products?????

So if I understand you correctly, the colour changes you’ve made in the customizer are not reflected in the WooCommerce single product Block.

As you can see in the screenshots, I wasn’t able to reproduce the problem so it’s probably not a bug.

Can you remove any snippets you have and switch to the native Storefront theme?

Alternatively, you can just rely on the block’s style settings to match the colour you have the customizer.

Here’s a screencast for reference: https://d.pr/v/vtxC0b

Look forward to hearing back from you.

This is what I’m seeing??? The block is hand-pick products..

https://snipboard.io/cy98PU.jpg

Hello @brucemacg!

I think there is some confusion in this thread: the difference between what you are seeing and what @babylon1999 was showing is due to the fact that he is using our newest Products (Beta) block, and you are using either the shortcode or the old Hand-picked Products block.

To be clear, as far as I know, there is no way to customize the style of the old Hand-picked Products block from the Customizer. Achieving what you want is fairly trivial if you want to change some colors by adding some custom CSS, do you have any knowledge about that?

Essentially, you could target your sale badges and your add to cart buttons with the .wc-block-grid__product-onsale and .wp-element-button.add_to_cart_button selectors respectively, and then with some custom code change some simple styles. It would look something like this:

.wp-element-button.add_to_cart_button {
  background-color: black;
  color: white;
}

To be clear, we do not support these sort of custom workflows and I’m just giving you pointers in case you want to do these simple modifications yourself. What I would encourage you to do, instead, is to follow our latest addition to the blocks, which are always evolving, and try out the Products (Beta) block and give us some feedback.

In a time not too far into the future, you are going to be able to do all of these things that you are requesting and have complete customization control using the Products (Beta) block and similar blocks.

Shortcodes are kind of a paradigm of the past, and blocks are going to make your journey much faster, easier and enjoyable, so I encourage you to get on board and provide feedback regarding your wishes and use-cases!

Hope that was helpful!

L.

ok, i understand.

I’m trying to eliminate custom code so I’ll try your products beta. How do i get this plugin..??

or do i enable somewhere?

cheers, Bruce

Howdy @brucemacg

I’m trying to eliminate custom code so I’ll try your products beta. How do i get this plugin..??

The plugin can be downloaded from here.

Furthermore, should you feel like keeping up-to-date with its progress, feel free to check out the related blog posts here.

I hope that helps!

Hi Pepe

Thanks, downloaded and tested, and found these 2 issues (for me)

1. Unfortunately the sales badge is still the default one, not the code in functions.php (which works 100% on my entire site, just not these new blocks..)
2. The “add to cart” button. in edit mode, the button is black with white writing (as per the changes I made in customizer). BUT, when I view the page, the formatting is back to the default. (i.e. bypassing changes I made on the customizer)
3. I then went into the button settings and changed the text colour, background colour and size of the button. I discovered that the text colour and the button size changes, but the background colour does not change, it stays default. (Everything looks good in edit mode. It’s only when I save and view that the background wont change(I guess it is a beta block though)
4. I’ll stay with the product shortcodes for the mean time.

regards, Bruce

Hi there @brucemacg

I am inspecting the code for the site at https://www.staging100.watersportswarehouse.co.za/testing-hand-pick-products/, and it appears that the custom SALE badge you are referring to is a .PNG image.

Since this is about handpicked products, as an alternative, I suggest checking out custom-building their layout, instead. In the sidebar, of the screen showcased in the screenshot linked here, the parts that can be enabled for each product, using the Hand-picked Products block, are shown -and can be toggled ON or OFF.

I went ahead with quickly replicating this, with blocks. Linked here is the result, showcasing the blocks I used on the left of the screen.

I hope that helps!

I’m going to stick with shortcodes, but I do have a worry going down the line… It seems like your storefront theme, being an old “classic” theme doesn’t quite match the new “block enabled” gutenberg blocks… None of my formatting in functions.php or the customiser is coming through to the new blocks….. Most disturbing..

regards, Bruce

Hello,

May I ask, did you try the custom CSS code as mentioned by @brucemacg? Is that not working for you?

For example:

.wc-block-grid__product-onsale {<br>background-color: YELLOW;<br>color: BLUE;<br>}

More Info: How to Add a Custom CSS in WooCommerce

Let us know if there are any questions.