HOWTO move add to cart block of K2Store

Many users have been asking how to move the add to cart block near the K2 Item image or just after the intro text.

You can do this in two methods. This howto will walk you through a few simple steps that will move the add to cart.

1. Using Plugin tag

We have introduced a plugin tag/syntax that can be added to your K2 Content. K2Store will recognise the tag and insert the cart there automatically.

Go to Joomla administrator->K2store->Options->Cart settings
Set the Add to cart placement param to Within Article content using tags.

Then go to K2 and open an existing product/item or create a new one.
in the content, use the following tag:

{k2storecart}

You can place this tag anywhere in the content.

2. Template override

CAUTION:  This method requires you to  have atleast a basic knowledge of the html or PHP code, just to interpret and understand atlest the <?php if...endif;?> block, so that you can edit the code correctly.

You first need to override the K2's template. To do that you must copy a few files. So you should have FTP access to your site. Use an FTP client like FileZilla for handling file operations.

Step 1: Copy the following folder

/components/com_k2/templates/default

to

 /templates/YOUR_TEMPLATE/html/com_k2/

 

NOTE: Some templates come with style support to K2. Such templates will already have a com_k2 folder inside your html folder. In this case, you do not have to copy the folder.

Step 2: Open

/templates/YOUR_TEMPLATE/html/com_k2/default/item.php

 

The item.php is used to display a single K2 Item. In this file, locate the following code.

<?php echo $this->item->event->K2AfterDisplay; ?>

Cut this line (shortcut key in Windows/Linuux: Ctrl+X).

This is the line that inserts K2Store addtocart block.

Let us assume that you want to display the Add to cart button, price and the quantity input box right after the image.

Around line 216 to 237, you will find the following block of code:

 

<?php if($this->item->params->get('itemImage') && !empty($this->item->image)): ?>
      <!-- Item Image -->
      <div class="itemImageBlock">
          <span class="itemImage">
              <a class="modal" rel="{handler: 'image'}" href="/<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
                  <img src="/<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
              </a>
          </span>

          <?php if($this->item->params->get('itemImageMainCaption') && !empty($this->item->image_caption)): ?>
          <!-- Image caption -->
          <span class="itemImageCaption"><?php echo $this->item->image_caption; ?></span>
          <?php endif; ?>

          <?php if($this->item->params->get('itemImageMainCredits') && !empty($this->item->image_credits)): ?>
          <!-- Image credits -->
          <span class="itemImageCredits"><?php echo $this->item->image_credits; ?></span>
          <?php endif; ?>

          <div class="clr"></div>
      </div>
      <?php endif; ?>

right after this block, add this line:

<?php echo $this->item->event->K2AfterDisplay; ?>

 

Save your file and visit your product page. Voila... you have successfully moved your add to cart block.

You can move the line whereever you wanted. It depends on your preference.

You can even have this line at multiple places so that the cart block is displayed at multiple times.

Moving Add to cart block in Category Items Display

You have to edit

 /templates/YOUR_TEMPLATE/html/com_k2/default/category_item.php.

 

The rest of the process is similar.

You only have to move the line

<?php echo $this->item->event->K2AfterDisplay; ?>

to a place you like.

 

NOTE: Sometimes, your template may be using a different K2 Sub-template instead of the default. For example, the JA_RAVE template from Joomlart has two different subtemplates - ja_rave, ja_rave_blog.

If you use these sub-templates, then you have to edit the item.php in these sub-templates folder as well.