Additional CSS Styles for Extra Short Codes

[gamehermit]

Hi Ivy & Amin,

I’m really enjoying working with the cart….great work! I have a question for you…

I am currently using [wp_eStore_category_products_fancy3 id=1] to display products categorically in grid format (displays 3 products per row)….this is working great! But I have a few categories with quite a few products so I would like to display them with 4 products per row. If I change the CSS to padding-left: 0px; and padding-right: 2px I get 4 products per row perfectly….but that changes the [wp_eStore_category_products_fancy3 id=1]. What I need to do is make a duplicate of [wp_eStore_category_products_fancy3 id=1] and give it a name like [wp_eStore_category_products_fancyCustom id=1] or something. This will allow me to choose between displaying 3 products or 4 products per row. I just don’t know how to add the additional style to the Extra Short codes Plugin. Can you please help me with this?

Thanks,

Jack

[amin007]

This means you will have to introduce a new shortcode for it too. If you are okay with writing PHP code then I can give you some hints.

[gamehermit]

Thanks Amin….I’ve never written php scripts before but I’m willing to try. I was going through the extra short code plugin and was trying to see all the sections where [wp_eStore_category_products_fancy3 id=1] sections were but couldn’t get a duplicate to work.

Jack

[amin007]

If you have never written PHP scripts then this could seem a little complex so I am going to give you the code that you can copy and paste to get going. We are going to call this new display Fancy 3 New (it’s an exact copy of fancy 3 original but you can change the CSS of this one without affecting the original one)

Copy the following bit of code and add it to the “eStore_extra_shortcode_css.css” file:

/*=== Fancy 3 new css ===*/

.eStore-fancy3new {display:block; float:left; padding-right: 25px; padding-bottom:10px; width:139px;}

.eStore-fancy3new-thumb img {height: 125px; width: 125px; border: 5px solid #ccc;}

.eStore-fancy3new-thumb a img {border: 5px solid #ccc;}

.eStore-fancy3new-thumb:hover img {border-color: #333;}

.eStore-fancy3new-footer{text-align:center;}

.eStore-fancy3new-price-tag{font-size: 120%;color: #7A7A7A;}

Copy the following bit of code and add it to the “eStore-extra-shortcodes.php” file:

add_shortcode('wp_eStore_fancy3new', 'wp_eStore_fancy3new_handler');



function wp_eStore_fancy3new_handler($atts) {

extract(shortcode_atts(array(

'id' => 'no id',

), $atts));

return show_wp_eStore_fancy3new($id);

}



function show_wp_eStore_fancy3new($id,$button_type=1,$clear=true)

{

global $wpdb;

$products_table_name = WP_ESTORE_PRODUCTS_TABLE_NAME;

$ret_product = $wpdb->get_row("SELECT * FROM $products_table_name WHERE id = '$id'", OBJECT);



if($clear)

{

$output .= '<div class="eStore-fancy-clear"></div>';

}

$output .= '<div class="eStore-fancy3new">';

$output .= '<div class="eStore-fancy3new-thumb">';

$output .= eStore_extra_get_fancy_thumb_code($ret_product);

$output .= '</div>';

$output .='<div class="eStore-fancy3new-footer">';

if(!empty($ret_product->product_url))

{

$output .= '<a href="'.$ret_product->product_url.'"><i>'.$ret_product->name.'</i></a>';

}

else

{

$output .= '<i>'.$ret_product->name.'</i>';

}



$output .= '<br /><div class="eStore-fancy3new-price-tag"><strong>'.ESTORE_PRICE.': '.WP_ESTORE_CURRENCY_SYMBOL.$ret_product->price.'</strong></div>';

if($button_type==1)

$output .= get_button_code_for_element($ret_product);

else if ($button_type==2)

$output .= print_eStore_buy_now_button($id);

else if ($button_type=)

$output .= print_eStore_subscribe_button_form($id);

else if ($button_type==4)

$output .= eStore_show_download_now_button($id);

$output .= '</div></div>';

if($clear)

{

$output .= '<div class="eStore-fancy-clear"></div>';

}

return $output;

}

That should do it.

[gamehermit]

Hi Amin and thanks for the help. Sorry for the delay….work’s been a bit hectic. I added the code to the eStore_extra_shortcode_css.css and to the eStore-extra-shortcodes.php. But when I add [wp_eStore_fancy3new id=1] to the page no products show up….only “[wp_eStore_fancy3new id=1]” in text. Below is the php file….did I do something wrong?

Thanks,

Jack

[admin deleted code]

[gamehermit]

Almost forgot….here’s the css code:

[admin deleted code]

[amin007]

It’s a little hard to debug code when it’s on plain text

I will send you a file with the code in it.

[gamehermit]

Awesome…thanks Amin!

[gamehermit]

Hi Amin…I just replied to your email.

Thanks,

Jack

[ellie123]

Hi there – would it be possible to post the final result here so we can try this? Or is there a better way to do this now?

Thank you

[admin]

Please explain exactly what change/customization you are after.

[Author]

Posts