Add to Cart buttons symetric

Hello,

first, thank you very much for all of your themes. They are beautiful and I really like working with them.

When I really don’t know, how to continue with my project, I always go to his support forum and you guys help me out. Now I again need your help. I’m building the little e-shop with Astrid theme and I ran into issue when the product in catalog page has 2 or more lines of name. When the product has 1 line of name, the Add to Cart button is showing great, but when there are 2 or more lines of name, the Add to Cart button is lower. You can check it out on this webpage: https://www.miterand.cz/e-shop/ , I’m also adding the image to the attachment of this post. Can you tell me how to set the Add to Cart position as “fixed”, so every Add to Cart button will be “in line” and symetric (check img)?

Thank you very much for your help guys, you are awesome :slight_smile:

Hello there,

Please try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    /**
    * Javascript-Equal-Height-Responsive-Rows
    * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
    */
    (function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
    heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
    row.equalHeight();}}
    return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;_this.data('grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
    $(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

    jQuery(function($) {

     if( $('body').hasClass('woocommerce-page') ) {

       var $postsContainer = $('.products');

       $(window).load( function() {
         $postsContainer.imagesLoaded( function() {
            $postsContainer.find('.product').responsiveEqualHeightGrid().addClass('resized');
         });
       });

       $('.products .product .button').wrap('<div class="prod-btn-wrapper"></div>');

     }

    });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .woocommerce .products .product.resized {
      margin-bottom: 70px !important;
    }

    .woocommerce .products .product.resized .prod-btn-wrapper {
      width: 100%;
      position: absolute;
      bottom: -10px;
      left: 0;
    }

Regards,
Kharis
aThemes Support

Hello,

I did what you wrote and it didn’t help :frowning: You can check what I have done in the attachments - there is possibility that I have done something wrong.

Please, do you have any other solution? I would be very happy if yes. If it will be necessary, I can write you the login and password to my WordPress site, so you can check it out.

Is there any way that I can support aThemes? I would love to send you some money, guys. You are doing incredible job with helping your customers :slight_smile:


Hey guys, are you able to help me? :frowning:

Thanks!

E: I managed to help myself, really easy with this CSS:

.woocommerce-loop-product__title {
	height: 65px;
}

Thanks :slight_smile:

Great!

Glad to know you have been able to manage it with your simple CSS solution. And thank you for sharing here.

Regards,
Kharis
aThemes Support