Need field for engraving

Thanks for this theme.

My client's product is a custom engraved product so I need a field for the shopper to enter what they want their item to say. I imagine I will have to add a custom field and a step to the checkout process. I know how to add custom fields and make them work in "the loop" on WordPress but What is the best way to go about this given that I am dealing with Marketpress, FrameMarket and GridMarket? More precisely, what scripts to I need to work with?

This next question is far less critical and important than the above question.

I've also been a little confounded with styling the drop downs on the horizontal navigation. To my eye, there is too much space above and below the link. Normally, multi-level nav CSS goes something like this:

nav li a {styles...}
nav li li a {styles...}

Framemarket offers only this code:

.nav ul li:last-child > a {}
.nav ul li:first-child > a {}

I did copy this code snippet into custom.css and was able to affect look & feel of first and last child links but that is not the desired result. I want the dropdown links to employ a background image that changes on hover, I don't want so much space above and below the link, and I would like to increase the width of the dropdown link area too. I've heavily customized the styling for the site and presumed that copying snippets from one of the other two style sheets into custom.css was the method for doing so safely, as this is the way it is done for the Thesis theme. Perhaps you can confirm that surmise.

  • Tammie

    First up the extra field - is this on a product if so then you'd be adding to the product so this would be MarketPress side.

    As for the navigation can you please provide a link to your site and I'll take a look if you can let me know what you want customised there I can hopefully offer some solutions. All the styling is there it could be just not showing through on your CSS. I ask for a link as FrameMarket offers far more than just the .child styling also you mention GridMarket so need to know what combination / you are using.

  • virtuallymarj

    Thanks for the quick replies, Tammie and DavidM!

    @Tammie ... the site is only online in my local xampp environment and running on goofy demo data that from a previous project. As I mentioned, I've been copying styles from framemarket.css and grid.css to custom.css to modify them. There is a third style sheet that I created in gridmarket specifically for this project so the styles delivered with gridmarket would be preserved as options. I just spent way too much time trying to move the site to an online location. Is there any way you can point me in the right direction without my having to fuss with that anymore? Alternatively, if you have a screen share utility I can invite you to my desktop to have a look.

    @DavidM ... I upgraded Framemarket theme. I also upgraded the MarketPress plugin and selected the option that you've noted. I do not see this available on the product page prior to checkout though. My client wants to present images of the textures and leather dyes in the cart page before sending the shopper over to pay. This will probably work for the purposes of my client with some further modifications to the single product and/or checkout pages.

  • Tammie

    Well anything to do with navigation would be any of these (copying from both themes) :

    /********************************** navigation */
    .nav{margin:0;padding:7px 6px 0;line-height:100%;float:right;}
    .nav li:hover > ul{display:block;}
    .nav ul li{float:none;margin:0;padding:0;}
    .nav ul ul{left:181px;top:-3px;}
    .nav ul li:first-child > a{}
    .nav ul li:last-child > a{}
    .nav:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
    .nav{display:inline-block;}
    html[xmlns] #nav{display:block;}
    * html #nav{height:1%;}
    .paged #nav-above,.single #nav-above{display:block;}
    #nav-above{margin:0 0 18px;}
    .navigation{line-height:18px;overflow:hidden;}
    .nav-previous{float:left;width:50%;}
    .nav-next{float:right;text-align:right;width:50%;}
    #navigation-bottom{margin:18px 0 0;}
    
    - framemarket.css
    
    /********************************** navigation and links*/
    a,a:link,a:visited{text-decoration:none;}
    a:hover{text-decoration:underline;}
    #navigation{margin:0px auto;width:980px;}
    .nav{margin:0;padding:0;line-height:100%;float:left;}
    .nav li{margin:0px 0px 0px 0px;padding:0px;float:left;position:relative;list-style:none;}
    .nav a,.nav a:visited,.nav a:link{font-style:normal;text-decoration:none;display:block;padding:15px 10px;font-size:18px;margin:0;}
    .nav .current a,.nav li:hover > a,.nav li.current_page_item a{padding:15px 10px;}
    .nav ul li:hover a,.nav li:hover li a{background:none;border:none;}
    .nav ul{display:none;margin:0;padding:0;width:200px;line-height:30px;position:absolute;top:42px;left:0;text-align:left;z-index:9999;}
    .nav ul a{font-weight:normal;}
    .nav-previous{float:left;}
    .nav-next{float:right;}
    
    - grid.css

    As you can see both are indicated in the stylesheets.

    Now depending on colour combinations:

    #header-wrapper{border-bottom:1px solid #dd5500;}
    #branding-wrapper,
    .nav .current a, .nav li:hover > a, .nav li.current_page_item a, .nav li:hover li a{background:#dd5500;color:#ffffff;}
    .nav ul li:hover a{background:#BB4400;color:#ffffff;}
    #navigation-wrapper,
    body,
    #shopping-cart,
    #header-wrapper,
    #footer-wrapper{background:#eeeeee;}
    .nav ul a:hover,
    .nav ul,
    #panel{background:#dddddd;}
    
    -orange.css

    Those may also come into play.

  • knight

    Just upgraded my membership because I needed a shopping cart with the same feature as referenced in this post. The field at the checkout is not really an acceptable option. If a customer purchases two items they would have to put personalized information for both items in one text box. This will lead to far too much confusion.

    I had installed wp-ecommerce and it had the feature available, I thought the mention of "- Custom personalization fields" on this https://premium.wpmudev.org/project/e-commerce page (under the packed with features section) would be available in the same manner.

    Is there another plugin offered here I can try?

  • virtuallymarj

    @knight ... you bring up a good point regarding the multiple orders may be confounding for the shopper, especially if they have different styles of product that they want engraved. ~sigh~

    I'm just not willing to start all over at this point. Can someone who is knowledgeable with Marketpress, Framemarket and Gridmarket please supply more insights into the functions and loops so those of us out here that can apply the knowledge can make the necessary changes?

    @Tammie ... I got the demo site up and running here if you'd like to have another look:

    http://mildlymystified.com/holstar/devsite/

  • virtuallymarj

    @Tammie, thank you for the great information you posted earlier. The link styling that I am having trouble isolating is in the sidebar cart widget. I have added an image icon to links in the sidebar and I want to omit that image icon from the link to the product in the sidebar cart widget.

    Here is the code that I copied from Firebug:

    <div class="mp_cart_widget">
        <table class="mp_cart_contents_widget">
        <thead>
            <tr><th colspan="2" class="mp_cart_col_product">Item:</th><th class="mp_cart_col_quant">Qty:</th><th class="mp_cart_col_price">Price:</th></tr>
        </thead>
        <tbody>
        <tr>
            <td class="mp_cart_col_thumb"><a href="http://mildlymystified.com/holstar/devsite/store/products/spiral-staircase/" id="product_image-190"><img width="25" height="25" title="spiral staircase" alt="spiral-staircase" class="alignleft mp_product_image_widget wp-post-image" src="http://mildlymystified.com/holstar/devsite/wp-content/uploads/2011/09/spiral-staircase-150x150.jpg"></a></td>
    <strong>        <td class="mp_cart_col_product_table"><a href="http://mildlymystified.com/holstar/devsite/store/products/spiral-staircase/">spiral staircase</a></td>
    </strong>
         <td class="mp_cart_col_quant">1</td>  <td class="mp_cart_col_price">$60.00</td>
        </tr>
        <tr>
            <td colspan="3" class="mp_cart_subtotal_lbl">Subtotal:</td>
            <td class="mp_cart_col_total">$60.00</td></tr></tbody>
        </table>
        <div class="mp_cart_actions_widget">
            <a title="Empty your shopping cart" href="http://mildlymystified.com/holstar/devsite/store/shopping-cart/?empty-cart=1" class="mp_empty_cart">Empty Cart</a>
            <a title="Go To Checkout Page" href="http://mildlymystified.com/holstar/devsite/store/shopping-cart/" class="mp_checkout_link">Checkout »</a></div>
    </div>

    In particular, I want to restyle the link to the product, which is the one before the price cell.

    If anyone of you MarketPress/FrameMarket/GridMarket experts have any idea where that code is located so I can redeclare it in one of the 3 style sheets governing this site, your help would be greatly appreciated!

  • Gary

    +1 for per-product instructions / text. It's a very common request.

    What I'd /really/ love to see is a more generalised ability to add supplementary fields to products on a per-product basis.

    e.g. add a drop down list of colour options, fabric/material options, size options, free text field for customising (or a greeting in the case of a gift shop).

    I know the product variations stuff is there - however when you consider (for example) a home-based business selling jewellery... to create a variation for every combination of multiple options is a massive overhead, and doesn't deliver a smooth buying experience for the shopper.

    If it were limited to similar fields to the PayPal button generator (2 drop downs and one free text field I think) - that would be a reasonable compromise. It would need to be configurable at individual product level though as not all products need all/any options.

    If this were to happen then Marketpress would become even more super-awesome

  • virtuallymarj

    For all who are reading the questions that I'm asking, I've isolated and remedied the css for the sidebar cart widget link today. The solution was (I guess) to move the link code lower in the style sheet so it wasn't superseded by subsequent styling, and to specifically call it as #sidebar so the other cart widget links wouldn't be affected. Here's the CSS:

    #sidebar .mp_cart_widget a { background: none; font-weight: bold; color: #660000; text-shadow: #FFFFFF 1px 1px; padding: 0px; margin: 0px; }

    I am still looking for advice on the best way to customize the checkout process to include a custom field for engraving for EACH product in the cart. Special instructions at PayPal are intended to say things like "OK to leave at the back door if no one is home" and other delivery messages.

  • Gary

    "I am still looking for advice on the best way to customize the checkout process to include a custom field for engraving for EACH product in the cart"

    Unfortunately I don't think there's a way of implementing that other than going into the core Marketpress code. You'd need to have a prompt when adding a product.

    Indeed... you'd also need to handle the situation where someone adds a product with one text value, then adds another of the same product with a different text value. These would have to be treated as separate items in the order.

    So adding it in would seem to be slightly trickier for the MP developers than it first seems. Would be very useful though!

    With the latest version of MP you do get a chance to enter notes/instructions as part of the shipping process. This is one text area for the whole order. In the short term it depends if you can live with telling the buyers "you need to supply the names in the instructions box".

    With that functionality you DO get a chance to put a customisable shipping message on the page - so you could make it clear in that what is needed/expected.

    A little clunky perhaps, however it is probably the best solution you'll get for the time being...

    cheers
    Gary

  • Aaron

    "I am still looking for advice on the best way to customize the checkout process to include a custom field for engraving for EACH product in the cart"

    We're aware that the current setup is more of an interim solution. We plan to add more robust per-product customization in a near future release. Technically it would be possible to add this yourself with the current filters and custom templates provided, though it would be anything but simple.

  • knight

    Just to throw another idea into the mix. It would be very nice to have multiple customization lines per product with a character limit per line.

    For example a customer orders a pair of toasting flutes for a wedding. Realistically there is only so much space to etch/engrave the text and not look bad. Unfortunately the customer enters something like "Bob & Carol Anne Smith blissfully joined this 5th day of June 2012 in Holy Matrimony" If I had a limit of 20 characters per line with maybe 3 lines available it would read "Bob & Carol Anne Smith" "Joined in Matrimony" "June 5th 2012".

    The point being we are better able to set a customers expectation and it saves an email from us that what they wanted isn't possible. While it would be possible to tell the customers there is a limit of X characters per lines and X lines per item. In my experience people either don't read the instructions or they don't count every character. This is especially true when presented with an unlimited text area form.

  • virtuallymarj

    Knight ... My clients have a similar issue but very few products.

    We will be uploading images with samples of the font sizes stamped on their product and will be using text to explain how many characters are available on the product at each font size.

    But, your point is a good one. The special instructions box at PayPal doesn't really have a character limitation and if this code was instead part of the cart product setup, writing an enhancement that would limit the amount of characters in that text field would be quite simple.