Display wrongly

(@alexodiy)

Hello. Can you show the page you are having problems with?

Thread Starter

(@maximed)

Thanks for your fast answer. Here you go:
Desktop -> https://res.cloudinary.com/crushon/image/upload/v1585067378/image_dgiqfe.png
Mobile -> https://res.cloudinary.com/crushon/image/upload/v1585067375/image_1_vhg8vy.png

Thread Starter

(@maximed)

@alexodiy
Thanks for your fast answer. Here you go:
Desktop -> https://res.cloudinary.com/crushon/image/upload/v1585067378/image_dgiqfe.png
Mobile -> https://res.cloudinary.com/crushon/image/upload/v1585067375/image_1_vhg8vy.png

Plugin Author

(@alexodiy)

You can style these elements in CSS using a class hierarchy. I could help you tomorrow, but I need a live page. Regarding the mobile version, in the settings, display 1 or 2

Thread Starter

(@maximed)

@alexodiy
Thank you. The domain is : crushonapp.com/
At the moment, the plugin is still installed but not activated. Just message me when you are available so that I can re-activate it ??

Best,

Plugin Author

(@alexodiy)

Hello. You can activate, I’ll see.

Thread Starter

(@maximed)

@alexodiy Activated!

Plugin Author

(@alexodiy)

I’ll see it now. It takes about an hour. Then I will give a solution.

Thread Starter

(@maximed)

@alexodiy Thank you very much. Let me know if you need any additional info ??

Plugin Author

(@alexodiy)

So, in your categories there are some styles, others in the product. Your topic binds certain classes, and it turns out that the class hierarchy is broken.

The solution is as follows:

You should add styles. You can do this directly in the file, for example, here /wp-content/themes/bigcart/css/theme.css or add as follows:

1. In the admin panel, go to “Appearance > Settings” (example)
2. Then go to the “Advanced CSS” tab (example)
3. Add the following code, for example:

.related .product, .upsells.products .product {
  padding: 0 15px;
  outline: none;
  position: relative;
  overflow: hidden;
}
.related .product .woocommerce-loop-product-link, 
.upsells.products .product .woocommerce-loop-product-link  {
  display: block;
}
.related .product:hover .product-thumbs .add_to_cart_button, 
.related .product:hover .product-thumbs .product_type_grouped, 
.related .product:hover .product-thumbs .product_type_external, 
.related .product:hover .product-thumbs .product_read_more_button,
.upsells.products .product:hover .product-thumbs .add_to_cart_button, 
.upsells.products .product:hover .product-thumbs .product_type_grouped, 
.upsells.products .product:hover .product-thumbs .product_type_external, 
.upsells.products.product:hover .product-thumbs .product_read_more_button{
  bottom: 0;
}
.related .product:hover .product-thumbs .added_to_cart:before,
.upsells.products .product:hover .product-thumbs .added_to_cart:before {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.related .product:hover .product-thumbs .wishlist-icon .wishlist-button,
.upsells.products .product:hover .product-thumbs .wishlist-icon .wishlist-button {
  right: 15px;
}
.related .product:hover .product-thumbs .wishlist-icon .wishlist-button:hover i,
.upsells.products .product:hover .product-thumbs .wishlist-icon .wishlist-button:hover i {
  animation-name: bigcart-pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.related .product:hover .product-thumbs .wishlist-icon .show-tooltip,
.upsells.products .product:hover .product-thumbs .wishlist-icon .show-tooltip {
  right: 13px;
}
.related .product:hover .product-thumbs .quickview,
.upsells.products .product:hover .product-thumbs .quickview {
  right: 70px;
}
.related .product:hover .product-thumbs .quickview:hover:before,
.upsells.products .product:hover .product-thumbs .quickview:hover:before {
  animation-name: bigcart-pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.related .product-thumbs,
.upsells.products .product-thumbs  {
  position: relative;
  overflow: hidden;
}
.related .product-thumbs .add_to_cart_button, 
.related .product-thumbs .product_type_grouped, 
.related .product-thumbs .product_type_external, 
.related .product-thumbs .product_read_more_button,
.upsells.products .product-thumbs .add_to_cart_button, 
.upsells.products .product-thumbs .product_type_grouped, 
.upsells.products .product-thumbs .product_type_external, 
.upsells.products .product-thumbs .product_read_more_button{
  display: block;
  width: 100%;
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-align: left;
  font-weight: 400;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -70px;
  padding: 0 0 0 20px;
  border: none;
  background: rgba(39, 39, 39, .7);
  border-radius: 0;
  transition: all 0.5s;
}
.related .product-thumbs .add_to_cart_button:hover, 
.related .product-thumbs .product_type_grouped:hover, 
.related .product-thumbs .product_type_external:hover, 
.related .product-thumbs .product_read_more_button:hover,
.upsells.products .product-thumbs .add_to_cart_button:hover, 
.upsells.products .product-thumbs .product_type_grouped:hover, 
.upsells.products .product-thumbs .product_type_external:hover, 
.upsells.products .product-thumbs .product_read_more_button:hover{
  background: rgba(39, 39, 39, .9);
}
.related .product-thumbs .add_to_cart_button.loading,
.upsells.products .product-thumbs .add_to_cart_button.loading {
  opacity: 1;
}
.related .product-thumbs .add_to_cart_button.loading:after,
.upsells.products .product-thumbs .add_to_cart_button.loading:after {
  animation: none;
}
.related .product-thumbs .add_to_cart_button.loading:before,
.upsells.products .product-thumbs .add_to_cart_button.loading:before  {
  opacity: 1;
}
.related .product-thumbs .add_to_cart_button:after,
.upsells.products .product-thumbs .add_to_cart_button:after {
  content: "\f07a";
  font-family: FontAwesome;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: #000;
  color: #fff;
}
.related .product-thumbs .add_to_cart_button:before,
.upsells.products .product-thumbs .add_to_cart_button:before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #777;
  border-top: 3px solid #ec7a5c;
  position: absolute;
  border-radius: 100%;
  animation: rotation 1s infinite linear;
  right: 5px;
  top: 6px;
  z-index: 10;
  opacity: 0;
  transition: all 0.3s;
}
.related .product-thumbs .wishlist-icon .wishlist-button,
.upsells.products .product-thumbs .wishlist-icon .wishlist-button {
  outline: none;
}
.related .product-thumbs .wishlist-icon .wishlist-button i,
.upsells.products .product-thumbs .wishlist-icon .wishlist-button i {
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.related .product-thumbs .wishlist-icon .wishlist-button.added-wishlist .fa-heart-o:before, 
.related .product-thumbs .wishlist-icon .wishlist-button.browse-wishlist .fa-heart-o:before,
.upsells.products .product-thumbs .wishlist-icon .wishlist-button.added-wishlist .fa-heart-o:before, 
.upsells.products .product-thumbs .wishlist-icon .wishlist-button.browse-wishlist .fa-heart-o:before{
  content: "\f004";
}
.related .product-thumbs .yith-wcwl-add-to-wishlist,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist {
  margin: 0;
  transition: all 0.5s;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist span,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist span {
  display: none;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist span.ajax-loading,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist span.ajax-loading {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist span.ajax-loading:before,
.upsells.products  .product-thumbs .yith-wcwl-add-to-wishlist span.ajax-loading:before {
  content: '';
  display: block;
  border: 4px solid #fff;
  border-top: 4px solid #777;
  border-radius: 100%;
  width: 48px;
  height: 48px;
  animation: rotation 1s infinite linear;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip {
  display: inline-block;
  position: absolute;
  top: 13px;
  right: -50px;
  background: transparent;
  border-radius: 5px;
  font-size: 0.9em;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip .show,
.upsells.products  .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip .show {
  display: inline-block !important;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip a,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip a {
  color: #fff;
  position: relative;
  z-index: 2;
  display: none;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip a:before,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist.show-tooltip a:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: -17px;
  border: 6px solid transparent;
  z-index: 1;
  border-left-color: rgba(0, 0, 0, 0.6);
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.no-hover-effect,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist.no-hover-effect {
  font-size: 0;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.no-hover-effect .add_to_wishlist:before,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist.no-hover-effect .add_to_wishlist:before {
  content: "\f08a";
  font-family: FontAwesome;
  font-size: 16px;
}
.related .product-thumbs .yith-wcwl-add-to-wishlist.no-hover-effect .exist_in_wishlist:before,
.upsells.products .product-thumbs .yith-wcwl-add-to-wishlist.no-hover-effect .exist_in_wishlist:before {
  content: "\f004";
  font-family: FontAwesome;
  font-size: 16px;
}

.related .product-thumbs .added_to_cart,
.upsells.products .product-thumbs .added_to_cart {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  overflow: hidden;
  padding: 0;
}
.related .product-thumbs .added_to_cart:before,
.upsells.products .product-thumbs .added_to_cart:before {
  content: "\e800";
  font-family: "minicart-font" !important;
  background: #fff;
  border-radius: 50%;
  font-size: 25px;
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 58px;
  color: #ec7a5c;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}
.related .product-thumbs .added_to_cart:hover:before,
.upsells.products .product-thumbs .added_to_cart:hover:before {
  background: #57bf3b;
  color: #fff;
}
.related .product-thumbs .quickview,
.upsells.products .product-thumbs .quickview {
  position: absolute;
  text-indent: -999em;
  top: 15px;
  right: -45px;
  width: 44px;
  height: 44px;
  background: #57bf3b;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.4s;
}
.related .product-thumbs .quickview:before,
.upsells.products .product-thumbs .quickview:before {
  content: "\e611";
  font-family: Themify;
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
  display: inline-block;
  font-size: 15px;
  width: 100%;
  line-height: 44px;
  text-align: center;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.related .product-thumbs img,
.upsells.products .product-thumbs img {
  width: 100%;
}
.related .product-info .woocommerce-loop-product__cat,
.upsells.products .product-info .woocommerce-loop-product__cat {
  margin: 10px 0;
}
.related .product-info .woocommerce-loop-product__cat a,
.upsells.products .product-info .woocommerce-loop-product__cat a {
  color: #57bf3b;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
}
.related .product-info .woocommerce-loop-product__title,
.upsells.products .product-info .woocommerce-loop-product__title {
  margin-top: 10px;
}
.related .product-info .woocommerce-loop-product__title a,
.upsells.products .product-info .woocommerce-loop-product__title a {
  color: #444;
  font-size: 15px;
}
.related .product-info .woocommerce-loop-product__title a:hover,
.upsells.products .product-info .woocommerce-loop-product__title a:hover {
  color: #57bf3b;
}
.related .product-info .price,
.upsells.products .product-info .price {
  display: block;
  padding: 5px 0;
  font-weight: 600;
  font-size: 15px;
  color: #222;
}
.related .product-info .price ins,
.upsells.products .product-info .price ins {
  text-decoration: none;
}
.related .star-rating,
.upsells.products .star-rating {
  margin: 0 auto 10px;
}
.related .product-category,
.upsells.products .product-category {
  margin-bottom: 20px;
}
.related .product-category a,
.upsells.products .product-category a {
  display: block;
  position: relative;
  overflow: hidden;
}
.related .product-category a:after,
.upsells.products .product-category a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
}
.related .product-category a:hover img,
.upsells.products .product-category a:hover img {
  transform: scale(1.1);
}
.related .product-category a:hover:after,
.upsells.products .product-category a:hover:after {
  opacity: 0.2;
}
.related .product-category img,
.upsells.products .product-category img  {
  display: block;
  transition: all 0.3s;
}
.related .product-category .product-cat-info,
.upsells.products .product-category .product-cat-info {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  text-align: center;
  transition: all 0.3s;
}
.related .product-category .product-cat-info:hover,
.upsells.products .product-category .product-cat-info:hover {
  background-color: #57bf3b !important;
}
.related .product-category mark,
.upsells.products .product-category mark {
  background: transparent;
  color: inherit;
}
.related .product-category .product-cat-title, 
.related .product-category .product-counts,

.upsells.products .product-category .product-cat-title, 
.upsells.products .product-category .product-counts{
  color: inherit;
  margin: 0;
}
.upsells.products .product-category .product-cat-title,
.upsells.products.product-category .product-cat-title {
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
}
.upsells.products .product-category .product-counts,
.upsells.products .product-category .product-counts {
  font-size: 13px;
}

If you liked our plugin, you can leave a review here.

And yet, remember all your changes, sooner or later we will make fixes for the templates, possibly when updating, what you change now is no longer needed.

Plugin Author

(@alexodiy)

A minute, I didn’t give the correct code.

Thread Starter

(@maximed)

@alexodiy Thaks for your promt reply and suggestion. Unfortunately, after adding the css code, nothing appears. The additional CSS is still here and the plugin is activated as well right now.

Plugin Author

(@alexodiy)

Now I will fix the code, I was a little mistaken. Wait a bit

Thread Starter

(@maximed)

@alexodiy No problem. Tell me if you want me to deactivate the present css code!

Plugin Author

(@alexodiy)