Image Size of Product

wpquestions789
(@wpquestions789)

1 year, 11 months ago

Love your theme awesome work. Ready to buy the paid version just trying to “tweak” the basic version to make sure it does what I need.

From what I read
You can insert a woocomerce product on a webpage using 2 METHODS

I inserted it both ways on this test page

(method#1) See first product on this page… I think this is the standard way, I displayed the product on my page using the built in blocks that come with WordPress Woocommerce, the one that says “INSERT HAND PICKED PRODUCTS”, I inserted the product “TEST THEME HIGH”.

(method#2) (FYI SAME IMAGE SOURCE) See second IDENTICAL product on this page I inserted this time using a “short Code” in this case I did : [products ids=”1215″], there is room for at least TWO images/products side by side on portrait mobile view.

Method 1 is ideal because when I insert this way, it also give me extra options that come with the block like option of “adding price”, option “adding product rating” option “adding add to cart button” but I am troubled with how it looks. In method 1 on the MOBILE device portrait mode it only shows one product at a time **takes up the whole screen*** (so it takes a lot of scrolls to go thru all the products). In method two I can fit two products on each row looks nice but I give up all the extra options that come with adding a product using the block Method A. How to fix so when adding using typical Method “A” Using the built in woocommerce blocks make it fit two products on one line Mobile view Portrait like it shows in Method B

Not to mix up threads but I added a comment in post:

The original poster said the topic was not answered yet, please advise.
https://wordpress.org/support/topic/edit-problem-4/

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Nidwija – ThemeGrill Support
(@nidwija)

1 year, 11 months ago

Hi @wpquestions789

As per my understanding, the display you want is the default display on a mobile device while showing the products.
You can use the Spacious Store demo and then insert your products going to your Dashboard-> Products and Add a new item there.
This will successfully add the product with all the information on display and should also be displayed as you require instead of one product at one time.

Let me know after you’ve tried this and if it helped!

Regards,
ThemeGrill

Thread Starter wpquestions789
(@wpquestions789)

1 year, 11 months ago

Hi there,
I appreciate the suggestion but I have already spent a lot of time customizing your Spacious Theme and it is working perfectly with the exception of that. I really do not want to start over with your Storefront version. Isn’t there any CSS than you can suggestion to make it go from 1 column to two columns on the mobile? It is two columns on the insert shortcode for product Method but when I insert products in the page using the built in Woocommerce wordpress blocks, one product is one on top of each other in the Mobile portrait, instead of two side by side. I have seen other theme develops give CSS solutions for their Themes when asked of the same issue so I know I am not alone. Thanks!
Check out this link please for the problem:
Click here
Nidwija – ThemeGrill Support
(@nidwija)

1 year, 11 months ago
Hi @wpquestions789

Can you try pasting the following CSS codes in the Additional CSS section and let me know if it helps?
```
.wc-block-grid.has-4-columns .wc-block-grid__products {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .wc-block-grid.has-4-columns .wc-block-grid__product {
        flex: 1 0 50%;
    }
}
```
Regards,
ThemeGrill
Thread Starter wpquestions789
(@wpquestions789)

1 year, 11 months ago

Thank you Nidwija, that definitely helped and looks much better BUT only 2 small issues

see link: LINK

1)It only works on even# of products (2 or 4 or 6)

I posted 3 MOBILE screenshots for you on my site

SCREENSHOT on LEFT was BEFORE we added your code (one image filled the whole mobile screen -takes too long to scroll products)

SCREENSHOT in CENTER is after putting your code (MUCH BETTER ie 2 products beside each other and smaller which is great BUT small problem is 3rd(bottom) and last product image is full size), is there anyway to make it so the odd product is small size as well?

2)Lastly is there anyway to somehow adjust button accordingly….decrease the Button SIZE and TEXT SIZE smaller (when I play with #columns to say 5 for later use, the button size looks the same width size, so button text wraps around see SNAPSHOT#3

Thanks for your help, you have been great!

Thread Starter wpquestions789
(@wpquestions789)

1 year, 11 months ago

FYI Still need help with the above post but just wanted to let you know I left you a 5 star review! You have been very helpful.

Nidwija – ThemeGrill Support
(@nidwija)

1 year, 11 months ago

Hi @wpquestions789
Thank you for the review! It is greatly appreciated 🙂
Can you send us the above recent queries to our live chat support on our website https://themegrill.com/contact/ as it would be more efficient with live support?

Regards,
ThemeGrill

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Image Size of Product’ is closed to new replies.

Views