Productpage

I see a whole lot of coding in my Quick CSS. Could it be one of these codes is causing trouble?

Should I remove this coding, before I add your new suggestions? As I am no web-developer, I’m unable to understand these codes and what they do for my website…

This is what is currently there:

.single-product-main-image {width: 66% !important;}

#top .product div.images img {
width: auto;
margin: 0 auto;
}

@media only screen and (max-width:767px) {
.responsive #top #main .sidebar {
display: block !important;
width: 100% !important;
border: 0 !important;
}

.responsive #top #main .sidebar .inner_sidebar {
margin-left: 0 !important;
}
}
.avia-button {
background-color:gold!important;
}

Sorry for my late respons.

1. Image size Herfstcursus is corrected now, thanks a lot!

2. About the search function, both your suggestion as Ismaels did not seem to work (or I entered it the wrong way or at the wrong place.

When I add Ismael CSS:

.post-type-archive .woocommerce-no-products-found {
display: none;

something is deleted from the search function, but this CSS code also effects the layout of the page.

I tried entering you suggestion in my Quick CSS in the Enfold General Styling:

function custom_pre_get_posts_query( $q ) {
$tax_query = (array) $q->get( ‘tax_query’ );
$tax_query[] = array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘slug’,
‘terms’ => array( ‘cursus’ ), // Don’t display products in the clothing category on the shop page.
‘operator’ => ‘NOT IN’
);
$q->set( ‘tax_query’, $tax_query );
}
add_action( ‘woocommerce_product_query’, ‘custom_pre_get_posts_query’ );

But that did not do anything.

Can you help me out? I am not a programmer, just a user. So please guide me as detailed as possible.

Thanks, Iris

I’m so sorry… it still does not work.

I placed in in the Appearance Editor. But still this “Not found field”.

There was already some info in the editor. Could that be the reason? Or could it be this text: “Don’t display products in the clothing category on the shop page.”

This is al the info there is in there:

@media only screen and (max-width: 768px) {

/* Add your Desktop Styles here */
.responsive #top .products .product:nth-child(odd) {
clear: none !important;
}
}
post-type-archive .woocommerce-no-products-found {
display: none;
}
function custom_pre_get_posts_query( $q ) {
$tax_query = (array) $q->get( ‘tax_query’ );
$tax_query[] = array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘slug’,
‘terms’ => array( ‘cursus’ ), // Don’t display products in the clothing category on the shop page.
‘operator’ => ‘NOT IN’
);
$q->set( ‘tax_query’, $tax_query );
}
add_action( ‘woocommerce_product_query’, ‘custom_pre_get_posts_query’ );

For your information: This is in the Enfold Quick CSS. Could that be interfering?

.single-product-main-image {width: 66% !important;}

#top .product div.images img {
width: auto;
margin: 0 auto;
}

#top.archive .thumbnail_container img {
height: 324px;
}

@media only screen and (max-width:767px) {
.responsive #top #main .sidebar {
display: block !important;
width: 100% !important;
border: 0 !important;
}

.responsive #top #main .sidebar .inner_sidebar {
margin-left: 0 !important;
}
}
.avia-button {
background-color:gold!important;
}

.product_cat-cursus .single-product-main-image{
width: 30%!important;
}

add_action( ‘woocommerce_product_query’, ‘custom_pre_get_posts_query’ );

This is so nerve-wracking. Did as you asked, including removing cache. But I still see more than the 8 products I want to display.

And the lay out is different than I planned, which makes the product-images out of proportions. I guess there is margins left and right now that were not there before.

If you can just fix it for me instead of me having to follow instructions that don’t seem to work, I would be very very happy!!!

Thank you so so much, Mike!!! So glad this “not found” box is away! It looks the way I want it to look now!

At least on my desktop. On my tablet there is no image on Privé-(Foto)bespreking (4th item).

And the product-images on tablet and mobile look so out of proportion. From a landscape image it makes a portrait image. Is there any thing I can do to make it display the landscape image that I made?

I hope you can help me out on that too. So glad you are helping me!

Thanks Ismael,

Looks good on desktop and mobile phone. Thanks a lot!

On my tablet there is still no image on Privé-(Foto)bespreking (4th item) and the images are still distorted (to sqare size this time). Would be very grateful if you could also fix that.

Hmmm…. added a new image to the product-overview. (Second product: Complete Opleiding) It’s torn out of proportions, but even different from the ones next to it. (That are also distorted again).

Can you please have another look at it?

In the Product Image the image looks the way I designed it. 960 x 540 pixels. And it’s improved in the product overview, at least all the text is visible.

But alle the images in the overview are still panoramic instead of landscape on the frontend. Is it possible to have another look at it.

I would be very happy if the product image would have the same aspect ratio as 960 x 540 pixels, on desktop, tablet and mobile.

Thanks a lot!!!! That makes the difference for the desktop & tablet.

Could you also arrange this for mobile, as there it still does not look any good…

Hi Mike,

The product-image size looks all right now on mobile, but only two out of eight images are displayed, the others generate question marks….
What can I do to solve this problem?