Garry Rigby

Hi Mirko, I already add that manually to the product short description as can be seen here ~ https://heritagecountrypottery.com/product/slipware-salt-kit-1914/.
Are you a custom developer?.. should I pay you?

Hi Maykato, this is more about adding a custom field to the product page short description, or putting a widget in the product page. I have a submenu of categories and list of latest products on my product pages but this I did with making a custom header and custom footer and sticking the widget blocks in those.
But for this one bit of code which I need to add to the short description there must be an easier way

Hi Shohan, yes I have reviewed that document.
All my images are square ~ 2000 px by 2000 px and my product images are Thumbnail set to 300 1:1.
What else might it be?

Hi Melinda, yes I have reviewed that document.
All my images are square ~ 2000 px by 2000 px and my product images are Thumbnail set to 300 1:1.
What else might it be?

This worked (Just requires fine-tuning depending on one’s taste)

/* top menu text 6 images */

.wc-block-handpicked-products .wc-block-grid__product-title {
font-size: 2em;
font-weight: 500;
}

/* front page 3 images */

.peter2-class .wc-block-grid__product-title {
font-size: 1.5em;
font-weight: 500;
}

/* latest additions 4 images */

.peter3-class .wc-block-grid__product-title {
font-size: 1.4em;
font-weight: 500;
}

Dear Mirko, Can you help with this..?

Product gallery thumbnails out of focus

RE ~ https://heritagecountrypottery.com/product/50210809143100_img_1707/
See image ~ https://hardy.global/out_of_focus.jpg

WordPress v 5.5 | WooCommerce v 5.6.0 | Intuition Pro v 2.3.1

I downloaded Regenerate Thumbnails plugin which made no difference?

The three images are 2000 px by 2000 px

Customising > WooCommerce > Product Images:
Main images width > 600px
Thumbnail width > 300 (1:1)

Strange thing is it works fine on another of my sites with same theme and WooCommerce
https://www.bravehound.co.uk/product/t-shirt/

I added this to functions.php to solve a mobile problem but that makes no difference to focus

add_action( ‘after_setup_theme’, ‘yourtheme_setup’ );

function yourtheme_setup() {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}

Bravehound is hosted by LCN and Heritagecountrypottery by 123Reg is the only difference I can see`

Thanks very much it was driving me nuts. Have a good day. Regards Garry

Thank you again Gabriel that worked! Have a good one. regards Garry

I inserted a block and then inspected the element to see what the div class was.
Also, if you have two product blocks and want them to appear differently on mobile give them a unique class in advanced settings ~ I had two product blocks by category and named one peter1-class and peter2-class. It takes a while to work out the convention which I achieved by trial and error

Hi Darcie, I found a work around which works apart from one problem…
I made a custom header and footer widget for my theme, then inserted a block widget in each one ~ Voilà.
Only problem is a grey arrowhead appears top left of each image in the footer widget block ~ do you know what it means?
It does not happen with blocks in the header widget.
Re: https://heritagecountrypottery.com/
I copied and pasted the blocks from this page where it is all fine ~ https://heritagecountrypottery.com/blocks/
Image showing arrows: https://hardy.global/greyarrow.jpg`

Hi, I found a work around but have one problem…
I made a custom header and footer widget for my theme, then inserted a block widget in each one ~ Voilà.
Only problem is a grey arrowhead appears top left of each image in the footer widget block ~ do you know what it means?
It does not happen with blocks in the header widget.
Re: https://heritagecountrypottery.com/
I copied and pasted the blocks from this page where it is all fine ~ https://heritagecountrypottery.com/blocks/
Image showing arrows: https://hardy.global/greyarrow.jpg`

• This reply was modified 3 years, 6 months ago by Garry Rigby.

Thank you Ryan. Regards Garry

Here is the code that worked…

I thought the whole point of a forum was to help people and not direct them to a paid developer?

re page: https://heritagecountrypottery.com/blocks/
how I wanted it to look: https://hardy.global/mobiles.jpg

Here css
(I added a class in advanced settings to differentiate between the two products by category blocks)

@media (max-width: 480px) {
.wc-block-handpicked-products .wc-block-grid__products {
display: flex !important;
}
.wc-block-handpicked-products .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter2-class .wc-block-grid__products {
display: flex !important;
}
.peter2-class .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter3-class .wc-block-grid__products {
display: flex !important;
}
.peter3-class .wc-block-grid__product {
flex: 1 0 25% !important;
}
}`

re page: https://heritagecountrypottery.com/blocks/
how I wanted it to look: https://hardy.global/mobiles.jpg

Here css
(I added a class in advanced settings to differentiate between the two products by category blocks)

@media (max-width: 480px) {
.wc-block-handpicked-products .wc-block-grid__products {
display: flex !important;
}
.wc-block-handpicked-products .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter2-class .wc-block-grid__products {
display: flex !important;
}
.peter2-class .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter3-class .wc-block-grid__products {
display: flex !important;
}
.peter3-class .wc-block-grid__product {
flex: 1 0 25% !important;
}
}`

Dear wpnomad and Niall

I thought the whole point of a forum was to help people and not direct them to a paid developer?
re page: https://heritagecountrypottery.com/blocks/
how I wanted it to look: https://hardy.global/mobiles.jpg

Here css
(I added a class in advanced settings to differentiate between the two products by category blocks)

@media (max-width: 480px) {
.wc-block-handpicked-products .wc-block-grid__products {
display: flex !important;
}
.wc-block-handpicked-products .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter2-class .wc-block-grid__products {
display: flex !important;
}
.peter2-class .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter3-class .wc-block-grid__products {
display: flex !important;
}
.peter3-class .wc-block-grid__product {
flex: 1 0 25% !important;
}
}`