Results 1 to 4 of 4
  1. #1
    Join Date
    May 2008
    Location
    Alconbury, UK
    Posts
    27
    Plugin Contributions
    0

    Default Problems changing layout of "add to shopping cart" box on product listing page

    Hi all -
    I'm having some problems customizing the look of the add to shopping cart element on the product page. I'm trying to get the add button to the right of the quantity box, and have them right next to the price, then the product detail paragraph right under that. I've read the threads on that topic, but so far I've not yet found the information I need. Could anyone possibly help me figure out how to do this? I would greatly appreciate it :)
    here's the link to my cart: http://botanikasoap.com/index.php?ma...&products_id=1

    Thanks so much!

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Problems changing layout of "add to shopping cart" box on product listing page

    Start with finding the cartAdd tag and edit as in red and add additional below
    Code:
    #cartAdd {
    	float: right;
    	text-align: left;
    	margin: -8.5em 0em 0em 0em;
    	padding: 0em;
    	}
    
    #productPrices {
    width: 20%;
    text-align: left;
    margin: 0em 0em 5em 10em;
    }
    
    #productDescription {
    float: right;
    width: 65%;
    }
    Zen-Venom Get Bitten

  3. #3
    Join Date
    May 2008
    Location
    Alconbury, UK
    Posts
    27
    Plugin Contributions
    0

    Default Re: Problems changing layout of "add to shopping cart" box on product listing page

    Thank you so much Kobra! That was a big help. I've implemented the code you so graciously provided, and made a few tweaks to get it just right. Now the issue I'm having is that I want the "add to cart" button to be directly to the right of the quantity input box instead of beneath it. I tried adjusting the width of the cardAdd div, but that didn't make the button come up and around. Do I need to have another class for the button to define it's placement? Here's the code I have right now:

    Code:
    #cartAdd {
    	float: left;
    	text-align: left;
    	padding: 0em;
    	margin-top: -6em;
    	margin-right: 0em;
    	margin-bottom: 0em;
    	margin-left: 11em;
    	width: 65%;
    	}
    
    #productPrices {
    	width: 20%;
    	text-align: left;
    	margin-top: 0em;
    	margin-right: 0em;
    	margin-bottom: 5em;
    	margin-left: 7em;
    }
    
    #productDescription {
    float: left;
    width: 100%;
    }
    The other change I'd like to make is the display of the current quantity in cart of a specific item. Right now it pops up above the quantity input box, and I'd like to have it underneath instead.

    Any help that could be offered with these issues is greatly appreciated
    Link to site: http://botanikasoap.com/index.php?ma...products_id=20

  4. #4
    Join Date
    May 2008
    Location
    Alconbury, UK
    Posts
    27
    Plugin Contributions
    0

    Default Re: Problems changing layout of "add to shopping cart" box on product listing page

    Thank you so much Kobra! I implemented that code, made a few tweaks and it works beautifully! You rock.
    I was wondering if you (or anyone) could enlighten me on how to bring the "add to cart" button out from under the quantity input box and have it to the right of the box. Do I need to have another class for the button and set the parameters via CSS?
    Thanks!
    http://botanikasoap.com/index.php?ma...products_id=25
    Last edited by crashley1784; 13 May 2008 at 07:29 PM. Reason: forgot link

 

 

Similar Threads

  1. v154 Product listing page "add to cart" button redirects to product info
    By Mikey D in forum General Questions
    Replies: 17
    Last Post: 9 Mar 2018, 03:41 AM
  2. EasyPopulate problem: "Add to Cart" and "price" not showing on product info page
    By pcspot in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 29 Apr 2010, 08:06 AM
  3. Adding 2 "add to cart" boxes on product listing page
    By dancindharma in forum Basic Configuration
    Replies: 2
    Last Post: 16 Sep 2008, 02:44 PM
  4. "Add To Cart" From Product Listing Page
    By andrewharbert in forum General Questions
    Replies: 1
    Last Post: 5 Jun 2008, 07:06 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg