Layout of "Shop-Page" with Productlist

[tschorro]

Hello,
First of all really good work with Neighbourhood! I just have some question for the Layout of the “Shop-Page”.
I attached a image with my questions/ wishes. I think it is pretty clear.

Can you help me with these three problems?

Thank you!

[Kyle – SUPPORT]

Hi

1) Add this to your custom css:

 .onsale, .wc-new-badge {
  display: none;
}

2) Add this:

.woocommerce ul.products li.product figure {
  box-shadow: none;
}

3) Go to neighborhood/includes/swift-framework/sf-content-display/sf-products.php and find this code:

$product_output .= '<div class="product-details">';
	            $product_output .= '<h5 itemprop="name"><a href="'.get_permalink($post->ID).'">'.get_the_title().'</a></h5>';
	       		
	       		if ($asset_type == "top-rated") {
	       		
	       			$product_output .= $rating_output;
	       		
	       		} else {
	            
            		$size = sizeof( get_the_terms( $post->ID, 'product_cat' ) );
            		$product_output .= $product->get_categories( ', ', '<span class="product-cats">' . _n( '', '', $size, 'woocommerce' ) . ' ', '</span>' );
            	
            	}
            	if (!$catalog_mode) {
	            $product_output .= '<span class="price" itemprop="price">'.$product->get_price_html().'</span>';
	            }
	            $product_output .= '</div>';
	            $product_output .= '</li>';

– Kyle

[tschorro]

Perfect, thank you!

Question 1 and 2 are good! But I have Problems with Question 3.

I changed the code with this one:

$product_output .= '<div class="product-details">';
                $product_output .= '<h4 itemprop="name"><a href="'.get_permalink($post->ID).'">'.get_the_title().'</a></h4>';
           		
           		if ($asset_type == "top-rated") {
           		
           			$product_output .= $rating_output;
           		
           		} else {
            	
            	}
            	if (!$catalog_mode) {
                $product_output .= '<span class="price" itemprop="price">'.$product->get_price_html().'</span>';
                }
                $product_output .= '</div>';
                $product_output .= '</li>';

But nothing happened.

Greetings Henrik

[Kyle – SUPPORT]

Sorry but I do not see what you have added? I thought you wanted to add text underneath the price? I can not see this added text

– Kyle

[tschorro]

I wanted to delete the catergory and the tax information. Also I wanted to change the stile of the price and title. But If I add the Code of your suggested page nothing changed.

Henrik

[Kyle – SUPPORT]

Hi

All of this can be done with css, please let me know what changes you want to make

– Kyle

[Kyle – SUPPORT]

Also please provide me with your link

– Kyle

[tschorro]

http://bewooden.de/produktkategorie/fliegen/

Also if I want to delete the tax information and the category?

Attached you find a layout.. Thanks!

Henrik

[Kyle – SUPPORT]

Add this to your custom css:

.products .woocommerce-de_price_taxrate {
  display: none;
}
.posted_in {
  display: none;
}
ul.products li.product .product-details {
  float: none;
  width: 100%;
  text-align: center;
}
ul.products li.product .product-details h3 {
  font-size: 20px;
}
ul.products li.product .price {
  float: none;
  text-align: center;
}

– Kyle

[tschorro]

Perfect thank you!!

How can I delete the “In den Warenkorb” layer?

And is there any margin in the css? Because the name of the product is a bit far away from the picture..

Henrik

[Kyle – SUPPORT]

Add this

.shop-actions {
  display:none;
}

– Kyle

[tschorro]

Perfect, thank you!

Sorry I have another question. I read in some other Threads that the loading time of my internet is the issue for the “double” loading of the product image.

1. If I open the Shop-Page, the script loads the second gallery image in the background- I guess because of the overlay transition. But I enabled that. So no picture should be loaded in the background right? How can I turn that off?

2. And how can I make the margin between the Name and the productimage smaller?

Thank you very much!!
Henrik

[tschorro]

Additionally to the same problem:

If I load the site in a smaller screen this happens. (see attached image)

Thanks!- Henrik

[tschorro]

1. Another problem. After clicking in “Shop” (http://bewooden.de/shop/) on “Manschettenknöpfe”, the products are displayed really weird. See the attached screenshot.

2. How can I change the Hover-Effect of the products? There is shown a little shadow at the bottom, I want to delete that.

[Kyle – SUPPORT]

Hi

1) I will come back to this

2) Add this css:

.woocommerce ul.products li.product figure {
  margin-bottom: 5px;
}

3) Please see: http://support.swiftideas.net/knowledgebase/how-to-fix-second-image-from-showing-after-removing-shop-actions/

4) You need to add an image for the first product

5) Add this css:

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
box-shadow: none;
-webkit-box-shadow: none;
}

– Kyle